@elliemae/ds-side-panel 2.0.0-alpha.11 → 2.0.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/SidePanel.js +63 -54
  2. package/cjs/SidePanelHeader.js +9 -9
  3. package/cjs/TemplateBasicPageWithSidePanel.js +51 -48
  4. package/esm/SidePanel.js +63 -54
  5. package/esm/SidePanelHeader.js +8 -7
  6. package/esm/TemplateBasicPageWithSidePanel.js +51 -48
  7. package/package.json +7 -7
  8. package/types/SidePanel.d.ts +78 -11
  9. package/types/SidePanelHeader.d.ts +36 -6
  10. package/types/TemplateBasicPageWithSidePanel.d.ts +71 -10
  11. package/types/props.d.ts +81 -10
package/cjs/SidePanel.js CHANGED
@@ -18,66 +18,75 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
18
18
 
19
19
  const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
20
20
  componentId: "sc-71f9h4-0"
21
- })(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], ({
22
- noGridInfluencer
23
- }) => noGridInfluencer ? 'position: relative;' : '');
21
+ })(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], _ref => {
22
+ let {
23
+ noGridInfluencer
24
+ } = _ref;
25
+ return noGridInfluencer ? 'position: relative;' : '';
26
+ });
24
27
  const TransGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
25
28
  componentId: "sc-71f9h4-1"
26
- })(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? dsSystem.border(props.theme.colors.neutral['300'], '1px') : 'none', ({
27
- noGridInfluencer
28
- }) => noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '', props => props.theme.colors.neutral['000']);
29
+ })(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? dsSystem.border(props.theme.colors.neutral['300'], '1px') : 'none', _ref2 => {
30
+ let {
31
+ noGridInfluencer
32
+ } = _ref2;
33
+ return noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '';
34
+ }, props => props.theme.colors.neutral['000']);
29
35
  const FooterContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
30
36
  componentId: "sc-71f9h4-2"
31
37
  })(["border-top:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
32
38
 
33
- const SidePanel = ({
34
- children,
35
- isOpen,
36
- footer,
37
- header,
38
- panelContent,
39
- panelWidth,
40
- panelContentOverflow,
41
- widthWhenIsClosed,
42
- noGridInfluencer,
43
- withBorder = true,
44
- withBoxShadow = false
45
- }) => /*#__PURE__*/_jsx__default["default"](Container, {
46
- noGridInfluencer: noGridInfluencer
47
- }, void 0, /*#__PURE__*/_jsx__default["default"](TransGrid, {
48
- height: "100%",
49
- flex: "1",
50
- mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
51
- }, void 0, children), /*#__PURE__*/_jsx__default["default"](TransGrid, {
52
- style: {
53
- overflow: 'hidden'
54
- },
55
- height: "100%",
56
- maxHeight: "100%",
57
- width: isOpen ? "".concat(panelWidth, "px") : "".concat(widthWhenIsClosed, "px"),
58
- withBorder: withBorder,
59
- withBoxShadow: withBoxShadow,
60
- isOpen: isOpen,
61
- cols: [1],
62
- noGridInfluencer: noGridInfluencer
63
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
64
- rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
65
- style: {
66
- overflow: 'hidden'
67
- }
68
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
69
- style: {
70
- overflow: 'hidden'
71
- }
72
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
73
- style: {
74
- overflow: panelContentOverflow
75
- }
76
- }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx__default["default"](FooterContainer, {
77
- alignItems: "center",
78
- pl: "xs",
79
- pr: "xs"
80
- }, void 0, footer) : null)));
39
+ const SidePanel = _ref3 => {
40
+ let {
41
+ children,
42
+ isOpen,
43
+ footer,
44
+ header,
45
+ panelContent,
46
+ panelWidth,
47
+ panelContentOverflow,
48
+ widthWhenIsClosed,
49
+ noGridInfluencer,
50
+ withBorder = true,
51
+ withBoxShadow = false
52
+ } = _ref3;
53
+ return /*#__PURE__*/_jsx__default["default"](Container, {
54
+ noGridInfluencer: noGridInfluencer
55
+ }, void 0, /*#__PURE__*/_jsx__default["default"](TransGrid, {
56
+ height: "100%",
57
+ flex: "1",
58
+ mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
59
+ }, void 0, children), /*#__PURE__*/_jsx__default["default"](TransGrid, {
60
+ style: {
61
+ overflow: 'hidden'
62
+ },
63
+ height: "100%",
64
+ maxHeight: "100%",
65
+ width: isOpen ? "".concat(panelWidth, "px") : "".concat(widthWhenIsClosed, "px"),
66
+ withBorder: withBorder,
67
+ withBoxShadow: withBoxShadow,
68
+ isOpen: isOpen,
69
+ cols: [1],
70
+ noGridInfluencer: noGridInfluencer
71
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
72
+ rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
73
+ style: {
74
+ overflow: 'hidden'
75
+ }
76
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
77
+ style: {
78
+ overflow: 'hidden'
79
+ }
80
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
81
+ style: {
82
+ overflow: panelContentOverflow
83
+ }
84
+ }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx__default["default"](FooterContainer, {
85
+ alignItems: "center",
86
+ pl: "xs",
87
+ pr: "xs"
88
+ }, void 0, footer) : null)));
89
+ };
81
90
 
82
91
  SidePanel.defaultProps = defaultProps.defaultProps;
83
92
  const DSSidePanelWithSchema = reactDesc.describe(SidePanel);
package/cjs/SidePanelHeader.js CHANGED
@@ -8,7 +8,7 @@ var reactDesc = require('react-desc');
8
8
  var styled = require('styled-components');
9
9
  var lodash = require('lodash');
10
10
  var dsSystem = require('@elliemae/ds-system');
11
- var CloseSmall = require('@elliemae/ds-icons/CloseSmall');
11
+ var dsIcons = require('@elliemae/ds-icons');
12
12
  var DSButton = require('@elliemae/ds-button');
13
13
  var dsGrid = require('@elliemae/ds-grid');
14
14
 
@@ -16,7 +16,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
16
 
17
17
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
18
18
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
19
- var CloseSmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseSmall);
20
19
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
21
20
 
22
21
  var _Grid, _CloseSmall;
@@ -30,12 +29,13 @@ const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig(
30
29
  componentId: "sc-1xdsdq5-2"
31
30
  })(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
32
31
 
33
- const SidePanelHeader = ({
34
- title = null,
35
- additionalAction = null,
36
- onClose = lodash.noop,
37
- showClose = true
38
- }) => {
32
+ const SidePanelHeader = _ref => {
33
+ let {
34
+ title = null,
35
+ additionalAction = null,
36
+ onClose = lodash.noop,
37
+ showClose = true
38
+ } = _ref;
39
39
  const theme = dsSystem.useTheme();
40
40
 
41
41
  const separator = _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
@@ -73,7 +73,7 @@ const SidePanelHeader = ({
73
73
  cols: additionalAction ? ['auto', 'auto', 'auto'] : ['auto']
74
74
  }, void 0, additionalAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, additionalAction), additionalAction && showClose && separator, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, showClose && /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
75
75
  buttonType: "text",
76
- icon: _CloseSmall || (_CloseSmall = /*#__PURE__*/_jsx__default["default"](CloseSmall__default["default"], {})),
76
+ icon: _CloseSmall || (_CloseSmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseSmall, {})),
77
77
  size: "m",
78
78
  onClick: onClose,
79
79
  "data-testid": "btn-close-slide-panel"
package/cjs/TemplateBasicPageWithSidePanel.js CHANGED
@@ -12,54 +12,57 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
14
 
15
- const TemplateBasicPageWithSidePanel = ({
16
- globalHeader = null,
17
- mainHeader = null,
18
- mainContent,
19
- mainFooter,
20
- isOpen = false,
21
- onClose,
22
- panelFooter,
23
- panelHeader,
24
- panelContent,
25
- panelWidth
26
- }) => /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
27
- style: {
28
- overflow: 'hidden',
29
- width: '100%'
30
- },
31
- height: "100%",
32
- maxHeight: "100%",
33
- rows: ['auto', '1fr']
34
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, globalHeader), /*#__PURE__*/_jsx__default["default"](SidePanel.SidePanel, {
35
- footer: panelFooter,
36
- header: panelHeader,
37
- panelWidth: panelWidth,
38
- onClose: onClose,
39
- panelContent: panelContent,
40
- isOpen: isOpen
41
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
42
- style: {
43
- overflow: 'hidden'
44
- },
45
- height: "100%",
46
- maxHeight: "100%"
47
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
48
- rows: mainFooter ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px'] : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)'],
49
- style: {
50
- overflow: 'hidden'
51
- }
52
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, mainHeader), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
53
- style: {
54
- overflow: 'hidden'
55
- }
56
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
57
- style: {
58
- overflow: 'auto'
59
- }
60
- }, void 0, mainContent)), mainFooter && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
61
- alignItems: "center"
62
- }, void 0, mainFooter)))));
15
+ const TemplateBasicPageWithSidePanel = _ref => {
16
+ let {
17
+ globalHeader = null,
18
+ mainHeader = null,
19
+ mainContent,
20
+ mainFooter,
21
+ isOpen = false,
22
+ onClose,
23
+ panelFooter,
24
+ panelHeader,
25
+ panelContent,
26
+ panelWidth
27
+ } = _ref;
28
+ return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
29
+ style: {
30
+ overflow: 'hidden',
31
+ width: '100%'
32
+ },
33
+ height: "100%",
34
+ maxHeight: "100%",
35
+ rows: ['auto', '1fr']
36
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, globalHeader), /*#__PURE__*/_jsx__default["default"](SidePanel.SidePanel, {
37
+ footer: panelFooter,
38
+ header: panelHeader,
39
+ panelWidth: panelWidth,
40
+ onClose: onClose,
41
+ panelContent: panelContent,
42
+ isOpen: isOpen
43
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
44
+ style: {
45
+ overflow: 'hidden'
46
+ },
47
+ height: "100%",
48
+ maxHeight: "100%"
49
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
50
+ rows: mainFooter ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px'] : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)'],
51
+ style: {
52
+ overflow: 'hidden'
53
+ }
54
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, mainHeader), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
55
+ style: {
56
+ overflow: 'hidden'
57
+ }
58
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
59
+ style: {
60
+ overflow: 'auto'
61
+ }
62
+ }, void 0, mainContent)), mainFooter && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
63
+ alignItems: "center"
64
+ }, void 0, mainFooter)))));
65
+ };
63
66
 
64
67
  const props = {
65
68
  /**
package/esm/SidePanel.js CHANGED
@@ -9,66 +9,75 @@ import { defaultProps } from './defaultProps.js';
9
9
 
10
10
  const Container = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "sc-71f9h4-0"
12
- })(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], ({
13
- noGridInfluencer
14
- }) => noGridInfluencer ? 'position: relative;' : '');
12
+ })(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], _ref => {
13
+ let {
14
+ noGridInfluencer
15
+ } = _ref;
16
+ return noGridInfluencer ? 'position: relative;' : '';
17
+ });
15
18
  const TransGrid = /*#__PURE__*/styled(Grid).withConfig({
16
19
  componentId: "sc-71f9h4-1"
17
- })(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none', ({
18
- noGridInfluencer
19
- }) => noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '', props => props.theme.colors.neutral['000']);
20
+ })(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none', _ref2 => {
21
+ let {
22
+ noGridInfluencer
23
+ } = _ref2;
24
+ return noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '';
25
+ }, props => props.theme.colors.neutral['000']);
20
26
  const FooterContainer = /*#__PURE__*/styled(Grid).withConfig({
21
27
  componentId: "sc-71f9h4-2"
22
28
  })(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
23
29
 
24
- const SidePanel = ({
25
- children,
26
- isOpen,
27
- footer,
28
- header,
29
- panelContent,
30
- panelWidth,
31
- panelContentOverflow,
32
- widthWhenIsClosed,
33
- noGridInfluencer,
34
- withBorder = true,
35
- withBoxShadow = false
36
- }) => /*#__PURE__*/_jsx(Container, {
37
- noGridInfluencer: noGridInfluencer
38
- }, void 0, /*#__PURE__*/_jsx(TransGrid, {
39
- height: "100%",
40
- flex: "1",
41
- mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
42
- }, void 0, children), /*#__PURE__*/_jsx(TransGrid, {
43
- style: {
44
- overflow: 'hidden'
45
- },
46
- height: "100%",
47
- maxHeight: "100%",
48
- width: isOpen ? "".concat(panelWidth, "px") : "".concat(widthWhenIsClosed, "px"),
49
- withBorder: withBorder,
50
- withBoxShadow: withBoxShadow,
51
- isOpen: isOpen,
52
- cols: [1],
53
- noGridInfluencer: noGridInfluencer
54
- }, void 0, /*#__PURE__*/_jsx(Grid, {
55
- rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
56
- style: {
57
- overflow: 'hidden'
58
- }
59
- }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, header), /*#__PURE__*/_jsx(Grid, {
60
- style: {
61
- overflow: 'hidden'
62
- }
63
- }, void 0, /*#__PURE__*/_jsx(Grid, {
64
- style: {
65
- overflow: panelContentOverflow
66
- }
67
- }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx(FooterContainer, {
68
- alignItems: "center",
69
- pl: "xs",
70
- pr: "xs"
71
- }, void 0, footer) : null)));
30
+ const SidePanel = _ref3 => {
31
+ let {
32
+ children,
33
+ isOpen,
34
+ footer,
35
+ header,
36
+ panelContent,
37
+ panelWidth,
38
+ panelContentOverflow,
39
+ widthWhenIsClosed,
40
+ noGridInfluencer,
41
+ withBorder = true,
42
+ withBoxShadow = false
43
+ } = _ref3;
44
+ return /*#__PURE__*/_jsx(Container, {
45
+ noGridInfluencer: noGridInfluencer
46
+ }, void 0, /*#__PURE__*/_jsx(TransGrid, {
47
+ height: "100%",
48
+ flex: "1",
49
+ mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
50
+ }, void 0, children), /*#__PURE__*/_jsx(TransGrid, {
51
+ style: {
52
+ overflow: 'hidden'
53
+ },
54
+ height: "100%",
55
+ maxHeight: "100%",
56
+ width: isOpen ? "".concat(panelWidth, "px") : "".concat(widthWhenIsClosed, "px"),
57
+ withBorder: withBorder,
58
+ withBoxShadow: withBoxShadow,
59
+ isOpen: isOpen,
60
+ cols: [1],
61
+ noGridInfluencer: noGridInfluencer
62
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
63
+ rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
64
+ style: {
65
+ overflow: 'hidden'
66
+ }
67
+ }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, header), /*#__PURE__*/_jsx(Grid, {
68
+ style: {
69
+ overflow: 'hidden'
70
+ }
71
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
72
+ style: {
73
+ overflow: panelContentOverflow
74
+ }
75
+ }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx(FooterContainer, {
76
+ alignItems: "center",
77
+ pl: "xs",
78
+ pr: "xs"
79
+ }, void 0, footer) : null)));
80
+ };
72
81
 
73
82
  SidePanel.defaultProps = defaultProps;
74
83
  const DSSidePanelWithSchema = describe(SidePanel);
package/esm/SidePanelHeader.js CHANGED
@@ -4,7 +4,7 @@ import { PropTypes, describe } from 'react-desc';
4
4
  import styled from 'styled-components';
5
5
  import { noop } from 'lodash';
6
6
  import { truncate, useTheme, border } from '@elliemae/ds-system';
7
- import CloseSmall from '@elliemae/ds-icons/CloseSmall';
7
+ import { CloseSmall } from '@elliemae/ds-icons';
8
8
  import DSButton from '@elliemae/ds-button';
9
9
  import { Grid } from '@elliemae/ds-grid';
10
10
 
@@ -19,12 +19,13 @@ const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
19
19
  componentId: "sc-1xdsdq5-2"
20
20
  })(["border-bottom:", ";"], props => border(props.theme.colors.neutral['300']));
21
21
 
22
- const SidePanelHeader = ({
23
- title = null,
24
- additionalAction = null,
25
- onClose = noop,
26
- showClose = true
27
- }) => {
22
+ const SidePanelHeader = _ref => {
23
+ let {
24
+ title = null,
25
+ additionalAction = null,
26
+ onClose = noop,
27
+ showClose = true
28
+ } = _ref;
28
29
  const theme = useTheme();
29
30
 
30
31
  const separator = _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
package/esm/TemplateBasicPageWithSidePanel.js CHANGED
@@ -4,54 +4,57 @@ import { PropTypes, describe } from 'react-desc';
4
4
  import { Grid } from '@elliemae/ds-grid';
5
5
  import { SidePanel } from './SidePanel.js';
6
6
 
7
- const TemplateBasicPageWithSidePanel = ({
8
- globalHeader = null,
9
- mainHeader = null,
10
- mainContent,
11
- mainFooter,
12
- isOpen = false,
13
- onClose,
14
- panelFooter,
15
- panelHeader,
16
- panelContent,
17
- panelWidth
18
- }) => /*#__PURE__*/_jsx(Grid, {
19
- style: {
20
- overflow: 'hidden',
21
- width: '100%'
22
- },
23
- height: "100%",
24
- maxHeight: "100%",
25
- rows: ['auto', '1fr']
26
- }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, globalHeader), /*#__PURE__*/_jsx(SidePanel, {
27
- footer: panelFooter,
28
- header: panelHeader,
29
- panelWidth: panelWidth,
30
- onClose: onClose,
31
- panelContent: panelContent,
32
- isOpen: isOpen
33
- }, void 0, /*#__PURE__*/_jsx(Grid, {
34
- style: {
35
- overflow: 'hidden'
36
- },
37
- height: "100%",
38
- maxHeight: "100%"
39
- }, void 0, /*#__PURE__*/_jsx(Grid, {
40
- rows: mainFooter ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px'] : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)'],
41
- style: {
42
- overflow: 'hidden'
43
- }
44
- }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, mainHeader), /*#__PURE__*/_jsx(Grid, {
45
- style: {
46
- overflow: 'hidden'
47
- }
48
- }, void 0, /*#__PURE__*/_jsx(Grid, {
49
- style: {
50
- overflow: 'auto'
51
- }
52
- }, void 0, mainContent)), mainFooter && /*#__PURE__*/_jsx(Grid, {
53
- alignItems: "center"
54
- }, void 0, mainFooter)))));
7
+ const TemplateBasicPageWithSidePanel = _ref => {
8
+ let {
9
+ globalHeader = null,
10
+ mainHeader = null,
11
+ mainContent,
12
+ mainFooter,
13
+ isOpen = false,
14
+ onClose,
15
+ panelFooter,
16
+ panelHeader,
17
+ panelContent,
18
+ panelWidth
19
+ } = _ref;
20
+ return /*#__PURE__*/_jsx(Grid, {
21
+ style: {
22
+ overflow: 'hidden',
23
+ width: '100%'
24
+ },
25
+ height: "100%",
26
+ maxHeight: "100%",
27
+ rows: ['auto', '1fr']
28
+ }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, globalHeader), /*#__PURE__*/_jsx(SidePanel, {
29
+ footer: panelFooter,
30
+ header: panelHeader,
31
+ panelWidth: panelWidth,
32
+ onClose: onClose,
33
+ panelContent: panelContent,
34
+ isOpen: isOpen
35
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
36
+ style: {
37
+ overflow: 'hidden'
38
+ },
39
+ height: "100%",
40
+ maxHeight: "100%"
41
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
42
+ rows: mainFooter ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px'] : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)'],
43
+ style: {
44
+ overflow: 'hidden'
45
+ }
46
+ }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, mainHeader), /*#__PURE__*/_jsx(Grid, {
47
+ style: {
48
+ overflow: 'hidden'
49
+ }
50
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
51
+ style: {
52
+ overflow: 'auto'
53
+ }
54
+ }, void 0, mainContent)), mainFooter && /*#__PURE__*/_jsx(Grid, {
55
+ alignItems: "center"
56
+ }, void 0, mainFooter)))));
57
+ };
55
58
 
56
59
  const props = {
57
60
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-side-panel",
3
- "version": "2.0.0-alpha.11",
3
+ "version": "2.0.0-alpha.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Side Panel",
6
6
  "module": "./esm/index.js",
@@ -52,20 +52,20 @@
52
52
  "build": "node ../../scripts/build/build.js"
53
53
  },
54
54
  "dependencies": {
55
- "@elliemae/ds-button": "2.0.0-alpha.11",
56
- "@elliemae/ds-grid": "2.0.0-alpha.11",
57
- "@elliemae/ds-icons": "2.0.0-alpha.11",
58
- "@elliemae/ds-system": "2.0.0-alpha.11",
55
+ "@elliemae/ds-button": "2.0.0-alpha.12",
56
+ "@elliemae/ds-grid": "2.0.0-alpha.12",
57
+ "@elliemae/ds-icons": "2.0.0-alpha.12",
58
+ "@elliemae/ds-system": "2.0.0-alpha.12",
59
59
  "react-desc": "~4.1.3"
60
60
  },
61
61
  "devDependencies": {
62
- "styled-components": "~5.3.1"
62
+ "styled-components": "~5.3.3"
63
63
  },
64
64
  "peerDependencies": {
65
65
  "lodash": "^4.17.21",
66
66
  "react": "^17.0.2",
67
67
  "react-dom": "^17.0.2",
68
- "styled-components": "^5.3.1"
68
+ "styled-components": "^5.3.3"
69
69
  },
70
70
  "publishConfig": {
71
71
  "access": "public",
package/types/SidePanel.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  import React from 'react';
2
3
  declare const SidePanel: {
3
4
  ({ children, isOpen, footer, header, panelContent, panelWidth, panelContentOverflow, widthWhenIsClosed, noGridInfluencer, withBorder, withBoxShadow, }: {
@@ -15,16 +16,66 @@ declare const SidePanel: {
15
16
  }): React.ReactElement;
16
17
  propTypes: {
17
18
  children: any;
18
- isOpen: any;
19
- footer: any;
20
- header: any;
21
- panelContent: any;
22
- panelWidth: any;
23
- widthWhenIsClosed: any;
24
- panelContentOverflow: any;
25
- withBorder: any;
26
- withBoxShadow: any;
27
- noGridInfluencer: any;
19
+ isOpen: {
20
+ defaultValue<T = unknown>(arg: T): {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
23
+ isRequired: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ footer: {
26
+ defaultValue<T = unknown>(arg: T): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValidator;
30
+ };
31
+ header: {
32
+ defaultValue<T = unknown>(arg: T): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ panelContent: {
38
+ defaultValue<T = unknown>(arg: T): {
39
+ deprecated: import("react-desc").PropTypesDescValidator;
40
+ };
41
+ isRequired: import("react-desc").PropTypesDescValidator;
42
+ };
43
+ panelWidth: {
44
+ defaultValue<T = unknown>(arg: T): {
45
+ deprecated: import("react-desc").PropTypesDescValidator;
46
+ };
47
+ isRequired: import("react-desc").PropTypesDescValidator;
48
+ };
49
+ widthWhenIsClosed: {
50
+ defaultValue<T = unknown>(arg: T): {
51
+ deprecated: import("react-desc").PropTypesDescValidator;
52
+ };
53
+ isRequired: import("react-desc").PropTypesDescValidator;
54
+ };
55
+ panelContentOverflow: {
56
+ defaultValue<T = unknown>(arg: T): {
57
+ deprecated: import("react-desc").PropTypesDescValidator;
58
+ };
59
+ isRequired: import("react-desc").PropTypesDescValidator;
60
+ };
61
+ withBorder: {
62
+ defaultValue<T = unknown>(arg: T): {
63
+ deprecated: import("react-desc").PropTypesDescValidator;
64
+ };
65
+ isRequired: import("react-desc").PropTypesDescValidator;
66
+ };
67
+ withBoxShadow: {
68
+ defaultValue<T = unknown>(arg: T): {
69
+ deprecated: import("react-desc").PropTypesDescValidator;
70
+ };
71
+ isRequired: import("react-desc").PropTypesDescValidator;
72
+ };
73
+ noGridInfluencer: {
74
+ defaultValue<T = unknown>(arg: T): {
75
+ deprecated: import("react-desc").PropTypesDescValidator;
76
+ };
77
+ isRequired: import("react-desc").PropTypesDescValidator;
78
+ };
28
79
  };
29
80
  defaultProps: {
30
81
  isOpen: boolean;
@@ -35,6 +86,22 @@ declare const SidePanel: {
35
86
  withBoxShadow: boolean;
36
87
  };
37
88
  };
38
- declare const DSSidePanelWithSchema: any;
89
+ declare const DSSidePanelWithSchema: {
90
+ (props?: {
91
+ children: any;
92
+ isOpen: any;
93
+ footer: any;
94
+ header: any;
95
+ panelContent: any;
96
+ panelWidth: any;
97
+ panelContentOverflow: any;
98
+ widthWhenIsClosed: any;
99
+ noGridInfluencer: any;
100
+ withBorder?: boolean | undefined;
101
+ withBoxShadow?: boolean | undefined;
102
+ } | undefined): JSX.Element;
103
+ propTypes: unknown;
104
+ toTypescript: () => import("react-desc").TypescriptSchema;
105
+ };
39
106
  export { SidePanel, DSSidePanelWithSchema };
40
107
  export default SidePanel;
package/types/SidePanelHeader.d.ts CHANGED
@@ -1,6 +1,7 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  declare const SidePanelHeader: {
3
- ({ title, additionalAction, onClose, showClose, }: {
4
+ ({ title, additionalAction, onClose, showClose }: {
4
5
  title?: null | undefined;
5
6
  additionalAction?: null | undefined;
6
7
  onClose?: ((...args: any[]) => void) | undefined;
@@ -8,14 +9,43 @@ declare const SidePanelHeader: {
8
9
  }): JSX.Element;
9
10
  propTypes: {
10
11
  /** Page title */
11
- title: any;
12
+ title: {
13
+ defaultValue<T = unknown>(arg: T): {
14
+ deprecated: import("react-desc").PropTypesDescValidator;
15
+ };
16
+ isRequired: import("react-desc").PropTypesDescValidator;
17
+ };
12
18
  /** Action button */
13
- additionalAction: any;
19
+ additionalAction: {
20
+ defaultValue<T = unknown>(arg: T): {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
23
+ isRequired: import("react-desc").PropTypesDescValidator;
24
+ };
14
25
  /** Called when the slide collapse */
15
- onClose: any;
26
+ onClose: {
27
+ defaultValue<T = unknown>(arg: T): {
28
+ deprecated: import("react-desc").PropTypesDescValidator;
29
+ };
30
+ isRequired: import("react-desc").PropTypesDescValidator;
31
+ };
16
32
  /** Show/Hide close button */
17
- showClose: any;
33
+ showClose: {
34
+ defaultValue<T = unknown>(arg: T): {
35
+ deprecated: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ isRequired: import("react-desc").PropTypesDescValidator;
38
+ };
18
39
  };
19
40
  };
20
- declare const DSSidePanelHeaderWithSchema: any;
41
+ declare const DSSidePanelHeaderWithSchema: {
42
+ (props?: {
43
+ title?: null | undefined;
44
+ additionalAction?: null | undefined;
45
+ onClose?: ((...args: any[]) => void) | undefined;
46
+ showClose?: boolean | undefined;
47
+ } | undefined): JSX.Element;
48
+ propTypes: unknown;
49
+ toTypescript: () => import("react-desc").TypescriptSchema;
50
+ };
21
51
  export { SidePanelHeader, DSSidePanelHeaderWithSchema };
package/types/TemplateBasicPageWithSidePanel.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  declare const TemplateBasicPageWithSidePanel: {
3
4
  ({ globalHeader, mainHeader, mainContent, mainFooter, isOpen, onClose, panelFooter, panelHeader, panelContent, panelWidth, }: {
@@ -16,11 +17,21 @@ declare const TemplateBasicPageWithSidePanel: {
16
17
  /**
17
18
  * Global Header
18
19
  */
19
- globalHeader: any;
20
+ globalHeader: {
21
+ defaultValue<T = unknown>(arg: T): {
22
+ deprecated: import("react-desc").PropTypesDescValidator;
23
+ };
24
+ isRequired: import("react-desc").PropTypesDescValidator;
25
+ };
20
26
  /**
21
27
  * Main Header
22
28
  */
23
- mainHeader: any;
29
+ mainHeader: {
30
+ defaultValue<T = unknown>(arg: T): {
31
+ deprecated: import("react-desc").PropTypesDescValidator;
32
+ };
33
+ isRequired: import("react-desc").PropTypesDescValidator;
34
+ };
24
35
  /**
25
36
  * Main content
26
37
  */
@@ -28,32 +39,82 @@ declare const TemplateBasicPageWithSidePanel: {
28
39
  /**
29
40
  * Main Footer
30
41
  */
31
- mainFooter: any;
42
+ mainFooter: {
43
+ defaultValue<T = unknown>(arg: T): {
44
+ deprecated: import("react-desc").PropTypesDescValidator;
45
+ };
46
+ isRequired: import("react-desc").PropTypesDescValidator;
47
+ };
32
48
  /**
33
49
  * Should show the slide panel or not
34
50
  */
35
- isOpen: any;
51
+ isOpen: {
52
+ defaultValue<T = unknown>(arg: T): {
53
+ deprecated: import("react-desc").PropTypesDescValidator;
54
+ };
55
+ isRequired: import("react-desc").PropTypesDescValidator;
56
+ };
36
57
  /**
37
58
  * Footer for Slide Panel
38
59
  */
39
- panelFooter: any;
60
+ panelFooter: {
61
+ defaultValue<T = unknown>(arg: T): {
62
+ deprecated: import("react-desc").PropTypesDescValidator;
63
+ };
64
+ isRequired: import("react-desc").PropTypesDescValidator;
65
+ };
40
66
  /**
41
67
  * Header for Slide Panel instance of SlidePanelHeader
42
68
  */
43
- panelHeader: any;
69
+ panelHeader: {
70
+ defaultValue<T = unknown>(arg: T): {
71
+ deprecated: import("react-desc").PropTypesDescValidator;
72
+ };
73
+ isRequired: import("react-desc").PropTypesDescValidator;
74
+ };
44
75
  /**
45
76
  * Content for Slide Panel
46
77
  */
47
- panelContent: any;
78
+ panelContent: {
79
+ defaultValue<T = unknown>(arg: T): {
80
+ deprecated: import("react-desc").PropTypesDescValidator;
81
+ };
82
+ isRequired: import("react-desc").PropTypesDescValidator;
83
+ };
48
84
  /**
49
85
  * Width of the panel open. eg: 300
50
86
  */
51
- panelWidth: any;
87
+ panelWidth: {
88
+ defaultValue<T = unknown>(arg: T): {
89
+ deprecated: import("react-desc").PropTypesDescValidator;
90
+ };
91
+ isRequired: import("react-desc").PropTypesDescValidator;
92
+ };
52
93
  /**
53
94
  * Callback
54
95
  */
55
- onClose: any;
96
+ onClose: {
97
+ defaultValue<T = unknown>(arg: T): {
98
+ deprecated: import("react-desc").PropTypesDescValidator;
99
+ };
100
+ isRequired: import("react-desc").PropTypesDescValidator;
101
+ };
56
102
  };
57
103
  };
58
- declare const DSTemplateBasicPageWithSidePanel: any;
104
+ declare const DSTemplateBasicPageWithSidePanel: {
105
+ (props?: {
106
+ globalHeader?: null | undefined;
107
+ mainHeader?: null | undefined;
108
+ mainContent: any;
109
+ mainFooter: any;
110
+ isOpen?: boolean | undefined;
111
+ onClose: any;
112
+ panelFooter: any;
113
+ panelHeader: any;
114
+ panelContent: any;
115
+ panelWidth: any;
116
+ } | undefined): JSX.Element;
117
+ propTypes: unknown;
118
+ toTypescript: () => import("react-desc").TypescriptSchema;
119
+ };
59
120
  export { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };
package/types/props.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const props: {
2
3
  /**
3
4
  * Main content
@@ -6,26 +7,96 @@ export declare const props: {
6
7
  /**
7
8
  * Should show the slide panel or not
8
9
  */
9
- isOpen: any;
10
+ isOpen: {
11
+ defaultValue<T = unknown>(arg: T): {
12
+ deprecated: import("react-desc").PropTypesDescValidator;
13
+ }; /**
14
+ * Content for Slide Panel
15
+ */
16
+ isRequired: import("react-desc").PropTypesDescValidator;
17
+ };
10
18
  /**
11
19
  * Footer for Slide Panel
12
20
  */
13
- footer: any;
21
+ footer: {
22
+ defaultValue<T = unknown>(arg: T): {
23
+ deprecated: import("react-desc").PropTypesDescValidator;
24
+ }; /**
25
+ * Content for Slide Panel
26
+ */
27
+ isRequired: import("react-desc").PropTypesDescValidator;
28
+ };
14
29
  /**
15
30
  * Header for Slide Panel instance of SlidePanelHeader
16
31
  */
17
- header: any;
32
+ header: {
33
+ defaultValue<T = unknown>(arg: T): {
34
+ deprecated: import("react-desc").PropTypesDescValidator;
35
+ }; /**
36
+ * Content for Slide Panel
37
+ */
38
+ isRequired: import("react-desc").PropTypesDescValidator;
39
+ };
18
40
  /**
19
41
  * Content for Slide Panel
20
42
  */
21
- panelContent: any;
43
+ panelContent: {
44
+ defaultValue<T = unknown>(arg: T): {
45
+ deprecated: import("react-desc").PropTypesDescValidator;
46
+ }; /**
47
+ * Content for Slide Panel
48
+ */
49
+ isRequired: import("react-desc").PropTypesDescValidator;
50
+ };
22
51
  /**
23
52
  * Width of the panel open. eg: 300
24
53
  */
25
- panelWidth: any;
26
- widthWhenIsClosed: any;
27
- panelContentOverflow: any;
28
- withBorder: any;
29
- withBoxShadow: any;
30
- noGridInfluencer: any;
54
+ panelWidth: {
55
+ defaultValue<T = unknown>(arg: T): {
56
+ deprecated: import("react-desc").PropTypesDescValidator;
57
+ }; /**
58
+ * Content for Slide Panel
59
+ */
60
+ isRequired: import("react-desc").PropTypesDescValidator;
61
+ };
62
+ widthWhenIsClosed: {
63
+ defaultValue<T = unknown>(arg: T): {
64
+ deprecated: import("react-desc").PropTypesDescValidator;
65
+ }; /**
66
+ * Content for Slide Panel
67
+ */
68
+ isRequired: import("react-desc").PropTypesDescValidator;
69
+ };
70
+ panelContentOverflow: {
71
+ defaultValue<T = unknown>(arg: T): {
72
+ deprecated: import("react-desc").PropTypesDescValidator;
73
+ }; /**
74
+ * Content for Slide Panel
75
+ */
76
+ isRequired: import("react-desc").PropTypesDescValidator;
77
+ };
78
+ withBorder: {
79
+ defaultValue<T = unknown>(arg: T): {
80
+ deprecated: import("react-desc").PropTypesDescValidator;
81
+ }; /**
82
+ * Content for Slide Panel
83
+ */
84
+ isRequired: import("react-desc").PropTypesDescValidator;
85
+ };
86
+ withBoxShadow: {
87
+ defaultValue<T = unknown>(arg: T): {
88
+ deprecated: import("react-desc").PropTypesDescValidator;
89
+ }; /**
90
+ * Content for Slide Panel
91
+ */
92
+ isRequired: import("react-desc").PropTypesDescValidator;
93
+ };
94
+ noGridInfluencer: {
95
+ defaultValue<T = unknown>(arg: T): {
96
+ deprecated: import("react-desc").PropTypesDescValidator;
97
+ }; /**
98
+ * Content for Slide Panel
99
+ */
100
+ isRequired: import("react-desc").PropTypesDescValidator;
101
+ };
31
102
  };