@elliemae/ds-side-panel 3.0.0-next.2 → 3.0.0-next.3

package/dist/esm/SidePanelHeader.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import styled from "styled-components";
+import { noop } from "lodash";
+import { border, truncate, useTheme } from "@elliemae/ds-system";
+import { CloseSmall } from "@elliemae/ds-icons";
+import DSButton from "@elliemae/ds-button";
+import { Grid } from "@elliemae/ds-grid";
+const StyledSeparator = styled.div`
+  width: 0;
+  height: 100%;
+  margin: 0 ${(props2) => props2.theme.space.xxs};
+  border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
+`;
+const StyledTitle = styled.div`
+  font-size: 18px;
+  font-weight: ${(props2) => props2.theme.fontWeights.regular};
+  color: ${(props2) => props2.theme.colors.neutral["700"]};
+  ${truncate()}
+`;
+const Wrapper = styled(Grid)`
+  border-bottom: ${(props2) => border(props2.theme.colors.neutral["300"])};
+`;
+const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {
+  const theme = useTheme();
+  const separator = /* @__PURE__ */ React2.createElement(Grid, {
+    height: "24px"
+  }, /* @__PURE__ */ React2.createElement(StyledSeparator, null));
+  const cols = [1, "auto", "auto"];
+  const cols2 = ["auto"];
+  return /* @__PURE__ */ React2.createElement(Wrapper, {
+    cols,
+    height: theme.space.m,
+    pl: theme.space.xs,
+    pr: theme.space.xs,
+    alignItems: "center",
+    width: "100%"
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    alignItems: "center",
+    justifyContent: "flex-start",
+    cols: cols2
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    cols: [1],
+    alignItems: "center",
+    pr: theme.space.xs
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    flexGrow: 0
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    cols: ["auto", "auto"],
+    alignItems: "center"
+  }, /* @__PURE__ */ React2.createElement(StyledTitle, {
+    maxWidth: "100%",
+    alignItems: "center"
+  }, title))))), /* @__PURE__ */ React2.createElement(Grid, {
+    ml: "xxs",
+    alignItems: "center",
+    cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"]
+  }, additionalAction && /* @__PURE__ */ React2.createElement(Grid, null, additionalAction), additionalAction && showClose && separator, /* @__PURE__ */ React2.createElement(Grid, null, showClose && /* @__PURE__ */ React2.createElement(DSButton, {
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(CloseSmall, null),
+    size: "m",
+    onClick: onClose,
+    "data-testid": "btn-close-slide-panel"
+  }))));
+};
+const props = {
+  title: PropTypes.string.description("Page title"),
+  additionalAction: PropTypes.element.description("Action button"),
+  onClose: PropTypes.func.description("Called when the slide collapse"),
+  showClose: PropTypes.bool.description("Show/Hide close button")
+};
+SidePanelHeader.propTypes = props;
+const DSSidePanelHeaderWithSchema = describe(SidePanelHeader);
+DSSidePanelHeaderWithSchema.propTypes = props;
+export {
+  DSSidePanelHeaderWithSchema,
+  SidePanelHeader
+};
+//# sourceMappingURL=SidePanelHeader.js.map

package/dist/esm/SidePanelHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/esm/TemplateBasicPageWithSidePanel.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { Grid } from "@elliemae/ds-grid";
+import SidePanel from "./SidePanel";
+const TemplateBasicPageWithSidePanel = ({
+  globalHeader = null,
+  mainHeader = null,
+  mainContent,
+  mainFooter,
+  isOpen = false,
+  onClose,
+  panelFooter,
+  panelHeader,
+  panelContent,
+  panelWidth
+}) => /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: "hidden", width: "100%" },
+  height: "100%",
+  maxHeight: "100%",
+  rows: ["auto", "1fr"]
+}, /* @__PURE__ */ React2.createElement(Grid, null, globalHeader), /* @__PURE__ */ React2.createElement(SidePanel, {
+  footer: panelFooter,
+  header: panelHeader,
+  panelWidth,
+  onClose,
+  panelContent,
+  isOpen
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: "hidden" },
+  height: "100%",
+  maxHeight: "100%"
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  rows: mainFooter ? [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)", "48px"] : [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)"],
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ React2.createElement(Grid, null, mainHeader), /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: "auto" }
+}, mainContent)), mainFooter && /* @__PURE__ */ React2.createElement(Grid, {
+  alignItems: "center"
+}, mainFooter)))));
+const props = {
+  globalHeader: PropTypes.element.description("Global Header"),
+  mainHeader: PropTypes.element.description("Main Header"),
+  mainContent: PropTypes.element.isRequired.description("Main content"),
+  mainFooter: PropTypes.element.description("Main Footer"),
+  isOpen: PropTypes.bool.description("Should show the slide panel or not"),
+  panelFooter: PropTypes.element.description("Footer for Slide Panel"),
+  panelHeader: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  panelContent: PropTypes.element.description("Content for Slide Panel"),
+  panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
+  onClose: PropTypes.func.description("callback")
+};
+TemplateBasicPageWithSidePanel.propTypes = props;
+const DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);
+DSTemplateBasicPageWithSidePanel.propTypes = props;
+export {
+  DSTemplateBasicPageWithSidePanel,
+  TemplateBasicPageWithSidePanel
+};
+//# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map

package/dist/esm/TemplateBasicPageWithSidePanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/esm/defaultProps.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const defaultProps = {
+  isOpen: false,
+  panelWidth: 300,
+  widthWhenIsClosed: 0,
+  panelContentOverflow: "auto",
+  withBorder: true,
+  withBoxShadow: false
+};
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "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"],
+  "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+export * from "./SidePanel";
+export * from "./SidePanelHeader";
+export * from "./TemplateBasicPageWithSidePanel";
+import { default as default2 } from "./SidePanel";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SidePanel';\nexport * from './SidePanelHeader';\nexport * from './TemplateBasicPageWithSidePanel';\nexport { default } from './SidePanel';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/props.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const props = {
+  children: PropTypes.element.isRequired.description("Main content"),
+  isOpen: PropTypes.bool.description("Should show the slide panel or not"),
+  footer: PropTypes.element.description("Footer for Slide Panel"),
+  header: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  panelContent: PropTypes.element.description("Content for Slide Panel"),
+  panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
+  widthWhenIsClosed: PropTypes.number.description("Width of the panel closed. eg: 0"),
+  panelContentOverflow: PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
+  withBorder: PropTypes.bool.description("Whether the sidepanel has border or not"),
+  withBoxShadow: PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
+  noGridInfluencer: PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
+};
+export {
+  props
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
+  "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"],
+  "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;",
+  "names": []
+}

package/package.json

@@ -1,35 +1,38 @@
 {
   "name": "@elliemae/ds-side-panel",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./TemplateBasicPageWithSidePanel": {
-      "import": "./esm/TemplateBasicPageWithSidePanel.js",
-      "require": "./cjs/TemplateBasicPageWithSidePanel.js"
+      "import": "./dist/esm/TemplateBasicPageWithSidePanel.js",
+      "require": "./dist/cjs/TemplateBasicPageWithSidePanel.js"
     },
     "./SidePanelHeader": {
-      "import": "./esm/SidePanelHeader.js",
-      "require": "./cjs/SidePanelHeader.js"
+      "import": "./dist/esm/SidePanelHeader.js",
+      "require": "./dist/cjs/SidePanelHeader.js"
     },
     "./SidePanel": {
-      "import": "./esm/SidePanel.js",
-      "require": "./cjs/SidePanel.js"
+      "import": "./dist/esm/SidePanel.js",
+      "require": "./dist/cjs/SidePanel.js"
     },
     "./props": {
-      "import": "./esm/props.js",
-      "require": "./cjs/props.js"
+      "import": "./dist/esm/props.js",
+      "require": "./dist/cjs/props.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -41,21 +44,21 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-next.2",
-    "@elliemae/ds-grid": "3.0.0-next.2",
-    "@elliemae/ds-icons": "3.0.0-next.2",
-    "@elliemae/ds-system": "3.0.0-next.2",
+    "@elliemae/ds-button": "3.0.0-next.3",
+    "@elliemae/ds-grid": "3.0.0-next.3",
+    "@elliemae/ds-icons": "3.0.0-next.3",
+    "@elliemae/ds-system": "3.0.0-next.3",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
@@ -69,7 +72,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/SidePanel.js

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var reactDesc = require('react-desc');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-var dsGrid = require('@elliemae/ds-grid');
-var props = require('./props.js');
-var defaultProps = require('./defaultProps.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-71f9h4-0"
-})(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], _ref => {
-  let {
-    noGridInfluencer
-  } = _ref;
-  return noGridInfluencer ? 'position: relative;' : '';
-});
-const TransGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-71f9h4-1"
-})(["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 => {
-  let {
-    noGridInfluencer
-  } = _ref2;
-  return noGridInfluencer ? "\n   position: absolute;\n   top:0;\n   right:0;\n   height: 100%;\n   " : '';
-}, props => props.theme.colors.neutral['000']);
-const FooterContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-71f9h4-2"
-})(["border-top:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
-
-const SidePanel = _ref3 => {
-  let {
-    children,
-    isOpen,
-    footer,
-    header,
-    panelContent,
-    panelWidth,
-    panelContentOverflow,
-    widthWhenIsClosed,
-    noGridInfluencer,
-    withBorder = true,
-    withBoxShadow = false
-  } = _ref3;
-  return /*#__PURE__*/_jsx__default["default"](Container, {
-    noGridInfluencer: noGridInfluencer
-  }, void 0, /*#__PURE__*/_jsx__default["default"](TransGrid, {
-    height: "100%",
-    flex: "1",
-    mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
-  }, void 0, children), /*#__PURE__*/_jsx__default["default"](TransGrid, {
-    style: {
-      overflow: 'hidden'
-    },
-    height: "100%",
-    maxHeight: "100%",
-    width: isOpen ? "".concat(panelWidth, "px") : "".concat(widthWhenIsClosed, "px"),
-    withBorder: withBorder,
-    withBoxShadow: withBoxShadow,
-    isOpen: isOpen,
-    cols: [1],
-    noGridInfluencer: noGridInfluencer
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
-    style: {
-      overflow: 'hidden'
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    style: {
-      overflow: 'hidden'
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    style: {
-      overflow: panelContentOverflow
-    }
-  }, void 0, panelContent)), footer ? /*#__PURE__*/_jsx__default["default"](FooterContainer, {
-    alignItems: "center",
-    pl: "xs",
-    pr: "xs"
-  }, void 0, footer) : null)));
-};
-
-SidePanel.defaultProps = defaultProps.defaultProps;
-const DSSidePanelWithSchema = reactDesc.describe(SidePanel);
-DSSidePanelWithSchema.propTypes = props.props;
-
-exports.DSSidePanelWithSchema = DSSidePanelWithSchema;
-exports.SidePanel = SidePanel;
-exports["default"] = SidePanel;

package/cjs/SidePanelHeader.js

@@ -1,100 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var reactDesc = require('react-desc');
-var styled = require('styled-components');
-var lodash = require('lodash');
-var dsSystem = require('@elliemae/ds-system');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var dsGrid = require('@elliemae/ds-grid');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _Grid, _CloseSmall;
-const StyledSeparator = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1xdsdq5-0"
-})(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => "".concat(props.theme.colors.neutral[300], " 1px solid"));
-const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1xdsdq5-1"
-})(["font-size:18px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], dsSystem.truncate());
-const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-1xdsdq5-2"
-})(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
-
-const SidePanelHeader = _ref => {
-  let {
-    title = null,
-    additionalAction = null,
-    onClose = lodash.noop,
-    showClose = true
-  } = _ref;
-  const theme = dsSystem.useTheme();
-
-  const separator = _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    height: "24px"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledSeparator, {})));
-
-  const cols = [1, 'auto', 'auto'];
-  const cols2 = ['auto'];
-  return /*#__PURE__*/_jsx__default["default"](Wrapper, {
-    cols: cols,
-    height: theme.space.m,
-    pl: theme.space.xs,
-    pr: theme.space.xs,
-    alignItems: "center",
-    width: "100%"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    alignItems: "center",
-    justifyContent: "flex-start",
-    cols: cols2
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    cols: [1],
-    alignItems: "center",
-    pr: theme.space.xs
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    flexGrow: 0
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    cols: ['auto', 'auto'],
-    alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {
-    maxWidth: "100%",
-    alignItems: "center"
-  }, void 0, title))))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    ml: "xxs",
-    alignItems: "center",
-    cols: additionalAction ? ['auto', 'auto', 'auto'] : ['auto']
-  }, 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"], {
-    buttonType: "text",
-    icon: _CloseSmall || (_CloseSmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseSmall, {})),
-    size: "m",
-    onClick: onClose,
-    "data-testid": "btn-close-slide-panel"
-  }))));
-};
-
-const props = {
-  /** Page title */
-  title: reactDesc.PropTypes.string.description('Page title'),
-
-  /** Action button */
-  additionalAction: reactDesc.PropTypes.element.description('Action button'),
-
-  /** Called when the slide collapse */
-  onClose: reactDesc.PropTypes.func.description('Called when the slide collapse'),
-
-  /** Show/Hide close button */
-  showClose: reactDesc.PropTypes.bool.description('Show/Hide close button')
-};
-const DSSidePanelHeaderWithSchema = reactDesc.describe(SidePanelHeader);
-DSSidePanelHeaderWithSchema.propTypes = props;
-
-exports.DSSidePanelHeaderWithSchema = DSSidePanelHeaderWithSchema;
-exports.SidePanelHeader = SidePanelHeader;