@elliemae/ds-side-panel 2.0.0-alpha.9 → 2.0.0-next.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 (10) hide show
  1. package/cjs/SidePanel.js +63 -59
  2. package/cjs/SidePanelHeader.js +10 -10
  3. package/cjs/TemplateBasicPageWithSidePanel.js +51 -48
  4. package/esm/SidePanel.js +63 -59
  5. package/esm/SidePanelHeader.js +9 -8
  6. package/esm/TemplateBasicPageWithSidePanel.js +51 -48
  7. package/package.json +7 -7
  8. package/types/SidePanelHeader.d.ts +1 -1
  9. package/cjs/package.json +0 -7
  10. package/esm/package.json +0 -7
package/cjs/SidePanel.js CHANGED
@@ -18,71 +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 ? `
29
- position: absolute;
30
- top:0;
31
- right:0;
32
- height: 100%;
33
- ` : '', 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']);
34
35
  const FooterContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
35
36
  componentId: "sc-71f9h4-2"
36
37
  })(["border-top:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
37
38
 
38
- const SidePanel = ({
39
- children,
40
- isOpen,
41
- footer,
42
- header,
43
- panelContent,
44
- panelWidth,
45
- panelContentOverflow,
46
- widthWhenIsClosed,
47
- noGridInfluencer,
48
- withBorder = true,
49
- withBoxShadow = false
50
- }) => /*#__PURE__*/_jsx__default["default"](Container, {
51
- noGridInfluencer: noGridInfluencer
52
- }, void 0, /*#__PURE__*/_jsx__default["default"](TransGrid, {
53
- height: "100%",
54
- flex: "1",
55
- mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0
56
- }, void 0, children), /*#__PURE__*/_jsx__default["default"](TransGrid, {
57
- style: {
58
- overflow: 'hidden'
59
- },
60
- height: "100%",
61
- maxHeight: "100%",
62
- width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
63
- withBorder: withBorder,
64
- withBoxShadow: withBoxShadow,
65
- isOpen: isOpen,
66
- cols: [1],
67
- noGridInfluencer: noGridInfluencer
68
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
69
- rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
70
- style: {
71
- overflow: 'hidden'
72
- }
73
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
74
- style: {
75
- overflow: 'hidden'
76
- }
77
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
78
- style: {
79
- overflow: panelContentOverflow
80
- }
81
- }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx__default["default"](FooterContainer, {
82
- alignItems: "center",
83
- pl: "xs",
84
- pr: "xs"
85
- }, 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
+ };
86
90
 
87
91
  SidePanel.defaultProps = defaultProps.defaultProps;
88
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,13 +16,12 @@ 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;
23
22
  const StyledSeparator = /*#__PURE__*/styled__default["default"].div.withConfig({
24
23
  componentId: "sc-1xdsdq5-0"
25
- })(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => `${props.theme.colors.neutral[300]} 1px solid`);
24
+ })(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => "".concat(props.theme.colors.neutral[300], " 1px solid"));
26
25
  const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
27
26
  componentId: "sc-1xdsdq5-1"
28
27
  })(["font-size:18px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], dsSystem.truncate());
@@ -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,71 +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 ? `
20
- position: absolute;
21
- top:0;
22
- right:0;
23
- height: 100%;
24
- ` : '', 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']);
25
26
  const FooterContainer = /*#__PURE__*/styled(Grid).withConfig({
26
27
  componentId: "sc-71f9h4-2"
27
28
  })(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
28
29
 
29
- const SidePanel = ({
30
- children,
31
- isOpen,
32
- footer,
33
- header,
34
- panelContent,
35
- panelWidth,
36
- panelContentOverflow,
37
- widthWhenIsClosed,
38
- noGridInfluencer,
39
- withBorder = true,
40
- withBoxShadow = false
41
- }) => /*#__PURE__*/_jsx(Container, {
42
- noGridInfluencer: noGridInfluencer
43
- }, void 0, /*#__PURE__*/_jsx(TransGrid, {
44
- height: "100%",
45
- flex: "1",
46
- mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0
47
- }, void 0, children), /*#__PURE__*/_jsx(TransGrid, {
48
- style: {
49
- overflow: 'hidden'
50
- },
51
- height: "100%",
52
- maxHeight: "100%",
53
- width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
54
- withBorder: withBorder,
55
- withBoxShadow: withBoxShadow,
56
- isOpen: isOpen,
57
- cols: [1],
58
- noGridInfluencer: noGridInfluencer
59
- }, void 0, /*#__PURE__*/_jsx(Grid, {
60
- rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
61
- style: {
62
- overflow: 'hidden'
63
- }
64
- }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, header), /*#__PURE__*/_jsx(Grid, {
65
- style: {
66
- overflow: 'hidden'
67
- }
68
- }, void 0, /*#__PURE__*/_jsx(Grid, {
69
- style: {
70
- overflow: panelContentOverflow
71
- }
72
- }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx(FooterContainer, {
73
- alignItems: "center",
74
- pl: "xs",
75
- pr: "xs"
76
- }, 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
+ };
77
81
 
78
82
  SidePanel.defaultProps = defaultProps;
79
83
  const DSSidePanelWithSchema = describe(SidePanel);
package/esm/SidePanelHeader.js CHANGED
@@ -4,14 +4,14 @@ 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
 
11
11
  var _Grid, _CloseSmall;
12
12
  const StyledSeparator = /*#__PURE__*/styled.div.withConfig({
13
13
  componentId: "sc-1xdsdq5-0"
14
- })(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => `${props.theme.colors.neutral[300]} 1px solid`);
14
+ })(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => "".concat(props.theme.colors.neutral[300], " 1px solid"));
15
15
  const StyledTitle = /*#__PURE__*/styled.div.withConfig({
16
16
  componentId: "sc-1xdsdq5-1"
17
17
  })(["font-size:18px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], truncate());
@@ -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.9",
3
+ "version": "2.0.0-next.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.9",
56
- "@elliemae/ds-grid": "2.0.0-alpha.9",
57
- "@elliemae/ds-icons": "2.0.0-alpha.9",
58
- "@elliemae/ds-system": "2.0.0-alpha.9",
55
+ "@elliemae/ds-button": "2.0.0-next.12",
56
+ "@elliemae/ds-grid": "2.0.0-next.12",
57
+ "@elliemae/ds-icons": "2.0.0-next.12",
58
+ "@elliemae/ds-system": "2.0.0-next.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/SidePanelHeader.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  declare const SidePanelHeader: {
3
- ({ title, additionalAction, onClose, showClose, }: {
3
+ ({ title, additionalAction, onClose, showClose }: {
4
4
  title?: null | undefined;
5
5
  additionalAction?: null | undefined;
6
6
  onClose?: ((...args: any[]) => void) | undefined;
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }