@elliemae/ds-side-panel 2.3.0-alpha.9 → 2.3.0-next.0

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 (43) hide show
  1. package/cjs/SidePanel.js +97 -0
  2. package/cjs/SidePanelHeader.js +100 -0
  3. package/cjs/TemplateBasicPageWithSidePanel.js +122 -0
  4. package/cjs/defaultProps.js +14 -0
  5. package/cjs/index.js +17 -0
  6. package/cjs/props.js +44 -0
  7. package/esm/SidePanel.js +86 -0
  8. package/esm/SidePanelHeader.js +89 -0
  9. package/esm/TemplateBasicPageWithSidePanel.js +113 -0
  10. package/esm/defaultProps.js +10 -0
  11. package/esm/index.js +3 -0
  12. package/esm/props.js +40 -0
  13. package/package.json +30 -32
  14. package/{dist/types → types}/SidePanel.d.ts +0 -0
  15. package/{dist/types → types}/SidePanelHeader.d.ts +0 -0
  16. package/{dist/types → types}/TemplateBasicPageWithSidePanel.d.ts +0 -0
  17. package/{dist/types → types}/defaultProps.d.ts +0 -0
  18. package/{dist/types → types}/index.d.ts +0 -0
  19. package/{dist/types → types}/props.d.ts +0 -0
  20. package/dist/cjs/SidePanel.js +0 -111
  21. package/dist/cjs/SidePanel.js.map +0 -7
  22. package/dist/cjs/SidePanelHeader.js +0 -109
  23. package/dist/cjs/SidePanelHeader.js.map +0 -7
  24. package/dist/cjs/TemplateBasicPageWithSidePanel.js +0 -91
  25. package/dist/cjs/TemplateBasicPageWithSidePanel.js.map +0 -7
  26. package/dist/cjs/defaultProps.js +0 -42
  27. package/dist/cjs/defaultProps.js.map +0 -7
  28. package/dist/cjs/index.js +0 -38
  29. package/dist/cjs/index.js.map +0 -7
  30. package/dist/cjs/props.js +0 -48
  31. package/dist/cjs/props.js.map +0 -7
  32. package/dist/esm/SidePanel.js +0 -82
  33. package/dist/esm/SidePanel.js.map +0 -7
  34. package/dist/esm/SidePanelHeader.js +0 -80
  35. package/dist/esm/SidePanelHeader.js.map +0 -7
  36. package/dist/esm/TemplateBasicPageWithSidePanel.js +0 -62
  37. package/dist/esm/TemplateBasicPageWithSidePanel.js.map +0 -7
  38. package/dist/esm/defaultProps.js +0 -13
  39. package/dist/esm/defaultProps.js.map +0 -7
  40. package/dist/esm/index.js +0 -9
  41. package/dist/esm/index.js.map +0 -7
  42. package/dist/esm/props.js +0 -19
  43. package/dist/esm/props.js.map +0 -7
package/dist/cjs/props.js DELETED
@@ -1,48 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var props_exports = {};
29
- __export(props_exports, {
30
- props: () => props
31
- });
32
- var React = __toESM(require("react"));
33
- var import_react_desc = require("react-desc");
34
- const props = {
35
- children: import_react_desc.PropTypes.element.isRequired.description("Main content"),
36
- isOpen: import_react_desc.PropTypes.bool.description("Should show the slide panel or not"),
37
- footer: import_react_desc.PropTypes.element.description("Footer for Slide Panel"),
38
- header: import_react_desc.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
39
- panelContent: import_react_desc.PropTypes.element.description("Content for Slide Panel"),
40
- panelWidth: import_react_desc.PropTypes.number.description("Width of the panel open. eg: 300"),
41
- widthWhenIsClosed: import_react_desc.PropTypes.number.description("Width of the panel closed. eg: 0"),
42
- panelContentOverflow: import_react_desc.PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
43
- withBorder: import_react_desc.PropTypes.bool.description("Whether the sidepanel has border or not"),
44
- withBoxShadow: import_react_desc.PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
45
- noGridInfluencer: import_react_desc.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
46
- };
47
- module.exports = __toCommonJS(props_exports);
48
- //# sourceMappingURL=props.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,QAAQ;AAAA,EAInB,UAAU,4BAAU,QAAQ,WAAW,YAAY;AAAA,EAInD,QAAQ,4BAAU,KAAK,YAAY;AAAA,EAInC,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAItC,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAItC,cAAc,4BAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,mBAAmB,4BAAU,OAAO,YAAY;AAAA,EAChD,sBAAsB,4BAAU,MAAM,CAAC,QAAQ,WAAW,YAAY;AAAA,EACtE,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,eAAe,4BAAU,KAAK,YAAY;AAAA,EAC1C,kBAAkB,4BAAU,KAAK,YAAY;AAAA;",
6
- "names": []
7
- }
@@ -1,82 +0,0 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import { describe } from "react-desc";
4
- import styled from "styled-components";
5
- import { border } from "@elliemae/ds-system";
6
- import { Grid } from "@elliemae/ds-grid";
7
- import { props as spprops } from "./props";
8
- import { defaultProps } from "./defaultProps";
9
- const Container = styled.div`
10
- display: flex;
11
- height: 100%;
12
- flex-direction: row;
13
- max-height: 100%;
14
- overflow: hidden;
15
- ${({ noGridInfluencer }) => noGridInfluencer ? "position: relative;" : ""}
16
- `;
17
- const TransGrid = styled(Grid)`
18
- box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
19
- transition: 300ms;
20
- border-left: ${(props) => props.withBorder ? border(props.theme.colors.neutral["300"], "1px") : "none"};
21
- ${({ noGridInfluencer }) => noGridInfluencer ? `
22
- position: absolute;
23
- top:0;
24
- right:0;
25
- height: 100%;
26
- ` : ""}
27
- background: ${(props) => props.theme.colors.neutral["000"]};
28
- `;
29
- const FooterContainer = styled(Grid)`
30
- border-top: ${(props) => border(props.theme.colors.neutral["300"])};
31
- `;
32
- const SidePanel = ({
33
- children,
34
- isOpen,
35
- footer,
36
- header,
37
- panelContent,
38
- panelWidth,
39
- panelContentOverflow,
40
- widthWhenIsClosed,
41
- noGridInfluencer,
42
- withBorder = true,
43
- withBoxShadow = false
44
- }) => /* @__PURE__ */ React2.createElement(Container, {
45
- noGridInfluencer
46
- }, /* @__PURE__ */ React2.createElement(TransGrid, {
47
- height: "100%",
48
- flex: "1",
49
- mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0
50
- }, children), /* @__PURE__ */ React2.createElement(TransGrid, {
51
- style: { overflow: "hidden" },
52
- height: "100%",
53
- maxHeight: "100%",
54
- width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
55
- withBorder,
56
- withBoxShadow,
57
- isOpen,
58
- cols: [1],
59
- noGridInfluencer
60
- }, /* @__PURE__ */ React2.createElement(Grid, {
61
- rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
62
- style: { overflow: "hidden" }
63
- }, /* @__PURE__ */ React2.createElement(Grid, null, header), /* @__PURE__ */ React2.createElement(Grid, {
64
- style: { overflow: "hidden" }
65
- }, /* @__PURE__ */ React2.createElement(Grid, {
66
- style: { overflow: panelContentOverflow }
67
- }, panelContent)), footer ? /* @__PURE__ */ React2.createElement(FooterContainer, {
68
- alignItems: "center",
69
- pl: "xs",
70
- pr: "xs"
71
- }, footer) : null)));
72
- SidePanel.propTypes = spprops;
73
- SidePanel.defaultProps = defaultProps;
74
- const DSSidePanelWithSchema = describe(SidePanel);
75
- DSSidePanelWithSchema.propTypes = spprops;
76
- var SidePanel_default = SidePanel;
77
- export {
78
- DSSidePanelWithSchema,
79
- SidePanel,
80
- SidePanel_default as default
81
- };
82
- //# sourceMappingURL=SidePanel.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as spprops } from './props';\nimport { defaultProps } from './defaultProps';\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 box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n right: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 = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer,\n withBorder = true,\n withBoxShadow = false,\n}): React.ReactElement => (\n <Container noGridInfluencer={noGridInfluencer}>\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\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 >\n <Grid\n rows={\n footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <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 </Grid>\n </TransGrid>\n </Container>\n);\n\nSidePanel.propTypes = spprops;\nSidePanel.defaultProps = defaultProps;\n\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = spprops;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,uBAAwB,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO;AAAA,gBACT,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,SAAS;AAAA,IAC/F,CAAC,EAAE,uBACH,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO;AAAA,gBACf,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG7D,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,MAEhB,qCAAC,WAAD;AAAA,EAAW;AAAA,GACT,qCAAC,WAAD;AAAA,EAAW,QAAO;AAAA,EAAO,MAAK;AAAA,EAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,GACjF,WAEH,qCAAC,WAAD;AAAA,EACE,OAAO,EAAE,UAAU;AAAA,EACnB,QAAO;AAAA,EACP,WAAU;AAAA,EACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM,CAAC;AAAA,EACP;AAAA,GAEA,qCAAC,MAAD;AAAA,EACE,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,UAAU,CAAC,SAAS,SAAS,OAAO;AAAA,EAE7F,OAAO,EAAE,UAAU;AAAA,GAEnB,qCAAC,MAAD,MAAO,SACP,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GACvB,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GAAyB,gBAEnD,SACC,qCAAC,iBAAD;AAAA,EAAiB,YAAW;AAAA,EAAS,IAAG;AAAA,EAAK,IAAG;AAAA,GAC7C,UAED;AAMZ,UAAU,YAAY;AACtB,UAAU,eAAe;AAEzB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
6
- "names": []
7
- }
@@ -1,80 +0,0 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import { PropTypes, describe } from "react-desc";
4
- import styled from "styled-components";
5
- import { noop } from "lodash";
6
- import { border, truncate, useTheme } from "@elliemae/ds-system";
7
- import { CloseSmall } from "@elliemae/ds-icons";
8
- import DSButton from "@elliemae/ds-button";
9
- import { Grid } from "@elliemae/ds-grid";
10
- const StyledSeparator = styled.div`
11
- width: 0;
12
- height: 100%;
13
- margin: 0 ${(props2) => props2.theme.space.xxs};
14
- border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
15
- `;
16
- const StyledTitle = styled.div`
17
- font-size: 18px;
18
- font-weight: ${(props2) => props2.theme.fontWeights.regular};
19
- color: ${(props2) => props2.theme.colors.neutral["700"]};
20
- ${truncate()}
21
- `;
22
- const Wrapper = styled(Grid)`
23
- border-bottom: ${(props2) => border(props2.theme.colors.neutral["300"])};
24
- `;
25
- const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {
26
- const theme = useTheme();
27
- const separator = /* @__PURE__ */ React2.createElement(Grid, {
28
- height: "24px"
29
- }, /* @__PURE__ */ React2.createElement(StyledSeparator, null));
30
- const cols = [1, "auto", "auto"];
31
- const cols2 = ["auto"];
32
- return /* @__PURE__ */ React2.createElement(Wrapper, {
33
- cols,
34
- height: theme.space.m,
35
- pl: theme.space.xs,
36
- pr: theme.space.xs,
37
- alignItems: "center",
38
- width: "100%"
39
- }, /* @__PURE__ */ React2.createElement(Grid, {
40
- alignItems: "center",
41
- justifyContent: "flex-start",
42
- cols: cols2
43
- }, /* @__PURE__ */ React2.createElement(Grid, {
44
- cols: [1],
45
- alignItems: "center",
46
- pr: theme.space.xs
47
- }, /* @__PURE__ */ React2.createElement(Grid, {
48
- flexGrow: 0
49
- }, /* @__PURE__ */ React2.createElement(Grid, {
50
- cols: ["auto", "auto"],
51
- alignItems: "center"
52
- }, /* @__PURE__ */ React2.createElement(StyledTitle, {
53
- maxWidth: "100%",
54
- alignItems: "center"
55
- }, title))))), /* @__PURE__ */ React2.createElement(Grid, {
56
- ml: "xxs",
57
- alignItems: "center",
58
- cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"]
59
- }, additionalAction && /* @__PURE__ */ React2.createElement(Grid, null, additionalAction), additionalAction && showClose && separator, /* @__PURE__ */ React2.createElement(Grid, null, showClose && /* @__PURE__ */ React2.createElement(DSButton, {
60
- buttonType: "text",
61
- icon: /* @__PURE__ */ React2.createElement(CloseSmall, null),
62
- size: "m",
63
- onClick: onClose,
64
- "data-testid": "btn-close-slide-panel"
65
- }))));
66
- };
67
- const props = {
68
- title: PropTypes.string.description("Page title"),
69
- additionalAction: PropTypes.element.description("Action button"),
70
- onClose: PropTypes.func.description("Called when the slide collapse"),
71
- showClose: PropTypes.bool.description("Show/Hide close button")
72
- };
73
- SidePanelHeader.propTypes = props;
74
- const DSSidePanelHeaderWithSchema = describe(SidePanelHeader);
75
- DSSidePanelHeaderWithSchema.propTypes = props;
76
- export {
77
- DSSidePanelHeaderWithSchema,
78
- SidePanelHeader
79
- };
80
- //# sourceMappingURL=SidePanelHeader.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n`;\n\nconst StyledTitle = styled.div`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n const theme = useTheme();\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator />\n </Grid>\n );\n const cols = [1, 'auto', 'auto'];\n const cols2 = ['auto'];\n return (\n <Wrapper\n cols={cols}\n height={theme.space.m}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"center\"\n width=\"100%\"\n >\n <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid cols={[1]} alignItems=\"center\" pr={theme.space.xs}>\n <Grid flexGrow={0}>\n <Grid cols={['auto', 'auto']} alignItems=\"center\">\n <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n {title}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <DSButton\n buttonType=\"text\"\n icon={<CloseSmall />}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n />\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nconst props = {\n /** Page title */\n title: PropTypes.string.description('Page title'),\n\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse'),\n\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\n\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,WAAU,GAAG,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,WACzC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C;AAAA;AAGJ,MAAM,UAAU,OAAO;AAAA,mBACJ,CAAC,WAAU,OAAO,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGhE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,WAAW;AACvG,QAAM,QAAQ;AACd,QAAM,YACJ,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,KACX,qCAAC,iBAAD;AAGJ,QAAM,OAAO,CAAC,GAAG,QAAQ;AACzB,QAAM,QAAQ,CAAC;AACf,SACE,qCAAC,SAAD;AAAA,IACE;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,KAEN,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,IAAa,MAAM;AAAA,KAC1D,qCAAC,MAAD;AAAA,IAAM,MAAM,CAAC;AAAA,IAAI,YAAW;AAAA,IAAS,IAAI,MAAM,MAAM;AAAA,KACnD,qCAAC,MAAD;AAAA,IAAM,UAAU;AAAA,KACd,qCAAC,MAAD;AAAA,IAAM,MAAM,CAAC,QAAQ;AAAA,IAAS,YAAW;AAAA,KACvC,qCAAC,aAAD;AAAA,IAAa,UAAS;AAAA,IAAO,YAAW;AAAA,KACrC,YAMX,qCAAC,MAAD;AAAA,IAAM,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAAA,KACrF,oBAAoB,qCAAC,MAAD,MAAO,mBAC3B,oBAAoB,aAAa,WAClC,qCAAC,MAAD,MACG,aACC,qCAAC,UAAD;AAAA,IACE,YAAW;AAAA,IACX,MAAM,qCAAC,YAAD;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAY;AAAA;AAAA;AAS1B,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY;AAAA,EAGpC,kBAAkB,UAAU,QAAQ,YAAY;AAAA,EAGhD,SAAS,UAAU,KAAK,YAAY;AAAA,EAGpC,WAAW,UAAU,KAAK,YAAY;AAAA;AAGxC,gBAAgB,YAAY;AAE5B,MAAM,8BAA8B,SAAS;AAE7C,4BAA4B,YAAY;",
6
- "names": []
7
- }
@@ -1,62 +0,0 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import { PropTypes, describe } from "react-desc";
4
- import { Grid } from "@elliemae/ds-grid";
5
- import SidePanel from "./SidePanel";
6
- const TemplateBasicPageWithSidePanel = ({
7
- globalHeader = null,
8
- mainHeader = null,
9
- mainContent,
10
- mainFooter,
11
- isOpen = false,
12
- onClose,
13
- panelFooter,
14
- panelHeader,
15
- panelContent,
16
- panelWidth
17
- }) => /* @__PURE__ */ React2.createElement(Grid, {
18
- style: { overflow: "hidden", width: "100%" },
19
- height: "100%",
20
- maxHeight: "100%",
21
- rows: ["auto", "1fr"]
22
- }, /* @__PURE__ */ React2.createElement(Grid, null, globalHeader), /* @__PURE__ */ React2.createElement(SidePanel, {
23
- footer: panelFooter,
24
- header: panelHeader,
25
- panelWidth,
26
- onClose,
27
- panelContent,
28
- isOpen
29
- }, /* @__PURE__ */ React2.createElement(Grid, {
30
- style: { overflow: "hidden" },
31
- height: "100%",
32
- maxHeight: "100%"
33
- }, /* @__PURE__ */ React2.createElement(Grid, {
34
- rows: mainFooter ? [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)", "48px"] : [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)"],
35
- style: { overflow: "hidden" }
36
- }, /* @__PURE__ */ React2.createElement(Grid, null, mainHeader), /* @__PURE__ */ React2.createElement(Grid, {
37
- style: { overflow: "hidden" }
38
- }, /* @__PURE__ */ React2.createElement(Grid, {
39
- style: { overflow: "auto" }
40
- }, mainContent)), mainFooter && /* @__PURE__ */ React2.createElement(Grid, {
41
- alignItems: "center"
42
- }, mainFooter)))));
43
- const props = {
44
- globalHeader: PropTypes.element.description("Global Header"),
45
- mainHeader: PropTypes.element.description("Main Header"),
46
- mainContent: PropTypes.element.isRequired.description("Main content"),
47
- mainFooter: PropTypes.element.description("Main Footer"),
48
- isOpen: PropTypes.bool.description("Should show the slide panel or not"),
49
- panelFooter: PropTypes.element.description("Footer for Slide Panel"),
50
- panelHeader: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
51
- panelContent: PropTypes.element.description("Content for Slide Panel"),
52
- panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
53
- onClose: PropTypes.func.description("callback")
54
- };
55
- TemplateBasicPageWithSidePanel.propTypes = props;
56
- const DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);
57
- DSTemplateBasicPageWithSidePanel.propTypes = props;
58
- export {
59
- DSTemplateBasicPageWithSidePanel,
60
- TemplateBasicPageWithSidePanel
61
- };
62
- //# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 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 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\n\nconst TemplateBasicPageWithSidePanel = ({\n globalHeader = null,\n mainHeader = null,\n mainContent,\n mainFooter,\n isOpen = false,\n onClose,\n panelFooter,\n panelHeader,\n panelContent,\n panelWidth,\n}) => (\n <Grid\n style={{ overflow: 'hidden', width: '100%' }}\n height=\"100%\"\n maxHeight=\"100%\"\n rows={['auto', '1fr']}\n >\n <Grid>{globalHeader}</Grid>\n <SidePanel\n footer={panelFooter}\n header={panelHeader}\n panelWidth={panelWidth}\n onClose={onClose}\n panelContent={panelContent}\n isOpen={isOpen}\n >\n <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n <Grid\n rows={\n mainFooter\n ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{mainHeader}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n </Grid>\n {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n </Grid>\n </Grid>\n </SidePanel>\n </Grid>\n);\n\nconst props = {\n /**\n * Global Header\n */\n globalHeader: PropTypes.element.description('Global Header'),\n /**\n * Main Header\n */\n mainHeader: PropTypes.element.description('Main Header'),\n /**\n * Main content\n */\n mainContent: PropTypes.element.isRequired.description('Main content'),\n /**\n * Main Footer\n */\n mainFooter: PropTypes.element.description('Main Footer'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n panelHeader: PropTypes.element.description(\n 'Header for Slide Panel instance of SlidePanelHeader',\n ),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n /**\n * Callback\n */\n onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\n\nconst DSTemplateBasicPageWithSidePanel = describe(\n TemplateBasicPageWithSidePanel,\n);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC,MAAD;AAAA,EACE,OAAO,EAAE,UAAU,UAAU,OAAO;AAAA,EACpC,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ;AAAA,GAEf,qCAAC,MAAD,MAAO,eACP,qCAAC,WAAD;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEA,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,EAAY,QAAO;AAAA,EAAO,WAAU;AAAA,GAC3D,qCAAC,MAAD;AAAA,EACE,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,UAClD,CAAC,aAAa,SAAS,OAAO;AAAA,EAEpC,OAAO,EAAE,UAAU;AAAA,GAEnB,qCAAC,MAAD,MAAO,aACP,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GACvB,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GAAW,eAErC,cAAc,qCAAC,MAAD;AAAA,EAAM,YAAW;AAAA,GAAU;AAOpD,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,UAAU,QAAQ,YAAY;AAAA,EAI1C,aAAa,UAAU,QAAQ,WAAW,YAAY;AAAA,EAItD,YAAY,UAAU,QAAQ,YAAY;AAAA,EAI1C,QAAQ,UAAU,KAAK,YAAY;AAAA,EAInC,aAAa,UAAU,QAAQ,YAAY;AAAA,EAI3C,aAAa,UAAU,QAAQ,YAC7B;AAAA,EAKF,cAAc,UAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,UAAU,OAAO,YAAY;AAAA,EAIzC,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,+BAA+B,YAAY;AAE3C,MAAM,mCAAmC,SACvC;AAEF,iCAAiC,YAAY;",
6
- "names": []
7
- }
@@ -1,13 +0,0 @@
1
- import * as React from "react";
2
- const defaultProps = {
3
- isOpen: false,
4
- panelWidth: 300,
5
- widthWhenIsClosed: 0,
6
- panelContentOverflow: "auto",
7
- withBorder: true,
8
- withBoxShadow: false
9
- };
10
- export {
11
- defaultProps
12
- };
13
- //# sourceMappingURL=defaultProps.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n"],
5
- "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AAAA;",
6
- "names": []
7
- }
package/dist/esm/index.js DELETED
@@ -1,9 +0,0 @@
1
- import * as React from "react";
2
- export * from "./SidePanel";
3
- export * from "./SidePanelHeader";
4
- export * from "./TemplateBasicPageWithSidePanel";
5
- import { default as default2 } from "./SidePanel";
6
- export {
7
- default2 as default
8
- };
9
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SidePanel';\nexport * from './SidePanelHeader';\nexport * from './TemplateBasicPageWithSidePanel';\nexport { default } from './SidePanel';\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
6
- "names": []
7
- }
package/dist/esm/props.js DELETED
@@ -1,19 +0,0 @@
1
- import * as React from "react";
2
- import { PropTypes } from "react-desc";
3
- const props = {
4
- children: PropTypes.element.isRequired.description("Main content"),
5
- isOpen: PropTypes.bool.description("Should show the slide panel or not"),
6
- footer: PropTypes.element.description("Footer for Slide Panel"),
7
- header: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
8
- panelContent: PropTypes.element.description("Content for Slide Panel"),
9
- panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
10
- widthWhenIsClosed: PropTypes.number.description("Width of the panel closed. eg: 0"),
11
- panelContentOverflow: PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
12
- withBorder: PropTypes.bool.description("Whether the sidepanel has border or not"),
13
- withBoxShadow: PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
14
- noGridInfluencer: PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
15
- };
16
- export {
17
- props
18
- };
19
- //# sourceMappingURL=props.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n"],
5
- "mappings": "AAAA;ACAA;AAEO,MAAM,QAAQ;AAAA,EAInB,UAAU,UAAU,QAAQ,WAAW,YAAY;AAAA,EAInD,QAAQ,UAAU,KAAK,YAAY;AAAA,EAInC,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAItC,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAItC,cAAc,UAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,mBAAmB,UAAU,OAAO,YAAY;AAAA,EAChD,sBAAsB,UAAU,MAAM,CAAC,QAAQ,WAAW,YAAY;AAAA,EACtE,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,eAAe,UAAU,KAAK,YAAY;AAAA,EAC1C,kBAAkB,UAAU,KAAK,YAAY;AAAA;",
6
- "names": []
7
- }