@elliemae/ds-side-panel 3.55.0-next.10 → 3.55.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.
@@ -35,9 +35,9 @@ __export(SidePanel_exports, {
35
35
  module.exports = __toCommonJS(SidePanel_exports);
36
36
  var React = __toESM(require("react"));
37
37
  var import_jsx_runtime = require("react/jsx-runtime");
38
- var import_ds_grid = require("@elliemae/ds-grid");
39
38
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
40
39
  var import_ds_system = require("@elliemae/ds-system");
40
+ var import_ds_grid = require("@elliemae/ds-grid");
41
41
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
42
42
  var import_useDelayedOpen = require("./useDelayedOpen.js");
43
43
  const Container = import_ds_system.styled.div`
@@ -64,25 +64,20 @@ const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
64
64
  const FooterContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
65
65
  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
66
66
  `;
67
- const SidePanel = (props) => {
68
- const propsWithDefault = {
69
- ...import_react_desc_prop_types.defaultProps,
70
- ...props
71
- };
72
- const {
73
- children,
74
- isOpen,
75
- footer,
76
- header,
77
- panelContent,
78
- panelWidth,
79
- panelContentOverflow,
80
- widthWhenIsClosed,
81
- noGridInfluencer,
82
- withBorder,
83
- withBoxShadow,
84
- side
85
- } = propsWithDefault;
67
+ const SidePanel = ({
68
+ children,
69
+ isOpen = false,
70
+ footer,
71
+ header,
72
+ panelContent,
73
+ panelWidth = 0,
74
+ panelContentOverflow,
75
+ widthWhenIsClosed = 0,
76
+ noGridInfluencer = false,
77
+ withBorder = true,
78
+ withBoxShadow = false,
79
+ side = "right"
80
+ }) => {
86
81
  const isOpenAnimated = (0, import_useDelayedOpen.useDelayedOpen)(isOpen);
87
82
  const panelJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
88
83
  TransGrid,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SidePanel.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { border, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{\n flex: string;\n withBoxShadow: boolean;\n withBorder: boolean;\n noGridInfluencer: boolean;\n side: 'left' | 'right';\n}>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.dialog};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = (props): React.ReactElement => {\n const propsWithDefault = {\n ...defaultProps,\n ...props,\n };\n const {\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer,\n withBorder,\n withBoxShadow,\n side,\n } = propsWithDefault;\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container data-testid=\"ds-side-panel-container\" noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { DSSidePanelWithSchema, SidePanel };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFb;AAxFV,qBAAqB;AACrB,8BAAyB;AACzB,uBAA+B;AAG/B,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB,EAAG;AAAA;AAG7E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBAOb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,MAAM,YAAqD,CAAC,UAA8B;AACxF,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,6BAAkB,oBAAoB,MACtC,4EACE;AAAA,wDAAC,uBAAM,kBAAO;AAAA,YACd,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,4CAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,6CAAC,aAAU,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{\n flex?: string;\n withBoxShadow?: boolean;\n withBorder?: boolean;\n noGridInfluencer?: boolean;\n side?: 'left' | 'right';\n isOpen?: boolean;\n}>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.dialog};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen = false,\n footer,\n header,\n panelContent,\n panelWidth = 0,\n panelContentOverflow,\n widthWhenIsClosed = 0,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n side = 'right',\n}): React.ReactElement => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container data-testid=\"ds-side-panel-container\" noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqFb;AAnFV,8BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AAErB,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB,EAAG;AAAA;AAG7E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBAQb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,6BAAkB,oBAAoB,MACtC,4EACE;AAAA,wDAAC,uBAAM,kBAAO;AAAA,YACd,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,4CAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,6CAAC,aAAU,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { Grid } from "@elliemae/ds-grid";
4
3
  import { describe } from "@elliemae/ds-props-helpers";
5
- import { border, styled } from "@elliemae/ds-system";
4
+ import { styled, border } from "@elliemae/ds-system";
5
+ import { Grid } from "@elliemae/ds-grid";
6
6
  import { DSInputTextPropTypes, defaultProps } from "./react-desc-prop-types.js";
7
7
  import { useDelayedOpen } from "./useDelayedOpen.js";
8
8
  const Container = styled.div`
@@ -29,25 +29,20 @@ const TransGrid = styled(Grid)`
29
29
  const FooterContainer = styled(Grid)`
30
30
  border-top: ${(props) => border(props.theme.colors.neutral["300"])};
31
31
  `;
32
- const SidePanel = (props) => {
33
- const propsWithDefault = {
34
- ...defaultProps,
35
- ...props
36
- };
37
- const {
38
- children,
39
- isOpen,
40
- footer,
41
- header,
42
- panelContent,
43
- panelWidth,
44
- panelContentOverflow,
45
- widthWhenIsClosed,
46
- noGridInfluencer,
47
- withBorder,
48
- withBoxShadow,
49
- side
50
- } = propsWithDefault;
32
+ const SidePanel = ({
33
+ children,
34
+ isOpen = false,
35
+ footer,
36
+ header,
37
+ panelContent,
38
+ panelWidth = 0,
39
+ panelContentOverflow,
40
+ widthWhenIsClosed = 0,
41
+ noGridInfluencer = false,
42
+ withBorder = true,
43
+ withBoxShadow = false,
44
+ side = "right"
45
+ }) => {
51
46
  const isOpenAnimated = useDelayedOpen(isOpen);
52
47
  const panelJSX = /* @__PURE__ */ jsx(
53
48
  TransGrid,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { border, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{\n flex: string;\n withBoxShadow: boolean;\n withBorder: boolean;\n noGridInfluencer: boolean;\n side: 'left' | 'right';\n}>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.dialog};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = (props): React.ReactElement => {\n const propsWithDefault = {\n ...defaultProps,\n ...props,\n };\n const {\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer,\n withBorder,\n withBoxShadow,\n side,\n } = propsWithDefault;\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container data-testid=\"ds-side-panel-container\" noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { DSSidePanelWithSchema, SidePanel };\nexport default SidePanel;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyFb,mBACE,KADF;AAxFV,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAG/B,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB,EAAG;AAAA;AAG7E,MAAM,YAAY,OAAO,IAAI;AAAA,gBAOb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,MAAM,YAAqD,CAAC,UAA8B;AACxF,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,6BAAkB,oBAAoB,MACtC,iCACE;AAAA,gCAAC,QAAM,kBAAO;AAAA,YACd,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,oBAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,aAAU,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{\n flex?: string;\n withBoxShadow?: boolean;\n withBorder?: boolean;\n noGridInfluencer?: boolean;\n side?: 'left' | 'right';\n isOpen?: boolean;\n}>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.dialog};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen = false,\n footer,\n header,\n panelContent,\n panelWidth = 0,\n panelContentOverflow,\n widthWhenIsClosed = 0,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n side = 'right',\n}): React.ReactElement => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container data-testid=\"ds-side-panel-container\" noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACqFb,mBACE,KADF;AAnFV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AAErB,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB,EAAG;AAAA;AAG7E,MAAM,YAAY,OAAO,IAAI;AAAA,gBAQb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,6BAAkB,oBAAoB,MACtC,iCACE;AAAA,gCAAC,QAAM,kBAAO;AAAA,YACd,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,oBAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,aAAU,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  import type { DSSidePanelT } from './react-desc-prop-types.js';
3
3
  declare const SidePanel: React.ComponentType<DSSidePanelT.Props>;
4
4
  declare const DSSidePanelWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSidePanelT.Props>;
5
- export { DSSidePanelWithSchema, SidePanel };
5
+ export { SidePanel, DSSidePanelWithSchema };
6
6
  export default SidePanel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-side-panel",
3
- "version": "3.55.0-next.10",
3
+ "version": "3.55.0-next.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Side Panel",
6
6
  "files": [
@@ -36,19 +36,19 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-grid": "3.55.0-next.10",
40
- "@elliemae/ds-button-v2": "3.55.0-next.10",
41
- "@elliemae/ds-props-helpers": "3.55.0-next.10",
42
- "@elliemae/ds-side-panel-header": "3.55.0-next.10",
43
- "@elliemae/ds-icons": "3.55.0-next.10",
44
- "@elliemae/ds-system": "3.55.0-next.10"
39
+ "@elliemae/ds-button-v2": "3.55.0-next.12",
40
+ "@elliemae/ds-grid": "3.55.0-next.12",
41
+ "@elliemae/ds-props-helpers": "3.55.0-next.12",
42
+ "@elliemae/ds-icons": "3.55.0-next.12",
43
+ "@elliemae/ds-side-panel-header": "3.55.0-next.12",
44
+ "@elliemae/ds-system": "3.55.0-next.12"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@elliemae/pui-cli": "9.0.0-next.65",
48
48
  "jest": "~29.7.0",
49
49
  "styled-components": "~5.3.9",
50
- "@elliemae/ds-monorepo-devops": "3.55.0-next.10",
51
- "@elliemae/ds-test-utils": "3.55.0-next.10"
50
+ "@elliemae/ds-test-utils": "3.55.0-next.12",
51
+ "@elliemae/ds-monorepo-devops": "3.55.0-next.12"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "lodash-es": "^4.17.21",