@elliemae/ds-left-navigation 3.51.0-rc.8 → 3.51.1
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.
- package/dist/cjs/constants/constants.js +95 -24
- package/dist/cjs/constants/constants.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +20 -4
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/Notifications/index.js +46 -9
- package/dist/cjs/exported-related/Notifications/index.js.map +2 -2
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +46 -10
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/cjs/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +6 -1
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +9 -5
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +36 -11
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js +23 -6
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/styled.js +28 -9
- package/dist/cjs/outOfTheBox/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +58 -43
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +104 -58
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +3 -3
- package/dist/esm/constants/constants.js +95 -24
- package/dist/esm/constants/constants.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +21 -5
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/Notifications/index.js +48 -11
- package/dist/esm/exported-related/Notifications/index.js.map +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +47 -11
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/esm/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +7 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +11 -7
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +37 -12
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemWithDate/index.js +24 -7
- package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/esm/outOfTheBox/styled.js +28 -9
- package/dist/esm/outOfTheBox/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +61 -46
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +105 -59
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/types/constants/constants.d.ts +81 -45
- package/package.json +10 -10
|
@@ -83,7 +83,16 @@ const ItemLink = (props) => {
|
|
|
83
83
|
},
|
|
84
84
|
shadowStyle,
|
|
85
85
|
children: [
|
|
86
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
+
import_styled.StyledLeftContainer,
|
|
88
|
+
{
|
|
89
|
+
cols: ["38px"],
|
|
90
|
+
gutter: "1px",
|
|
91
|
+
justifyItems: "center",
|
|
92
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
|
|
93
|
+
children: CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx })
|
|
94
|
+
}
|
|
95
|
+
),
|
|
87
96
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
97
|
import_styled.StyledItemLabel,
|
|
89
98
|
{
|
|
@@ -95,7 +104,15 @@ const ItemLink = (props) => {
|
|
|
95
104
|
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
96
105
|
}
|
|
97
106
|
),
|
|
98
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
import_styled.StyledRightContainer,
|
|
109
|
+
{
|
|
110
|
+
mt: "xxxs",
|
|
111
|
+
pr: "xxs2",
|
|
112
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
113
|
+
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
114
|
+
}
|
|
115
|
+
)
|
|
99
116
|
]
|
|
100
117
|
}
|
|
101
118
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemLink/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemLink = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel: typeof label === 'string' ? label : '',\n ...item.itemOpts,\n selectable: true,\n },\n }}\n shadowStyle={shadowStyle}\n >\n <StyledLeftContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDnB;AAhDJ,mBAAmC;AACnC,uCAA2C;AAE3C,8BAA6B;AAE7B,oBAA2E;AAC3E,uBAA4C;AAE5C,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA;AAAA;AAAA,kCAGlD,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kCAI9D,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlD,MAAM,WAAW,CAAC,UAAyD;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,kBAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemLink = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel: typeof label === 'string' ? label : '',\n ...item.itemOpts,\n selectable: true,\n },\n }}\n shadowStyle={shadowStyle}\n >\n <StyledLeftContainer\n cols={['38px']}\n gutter=\"1px\"\n justifyItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\n ml=\"1px\"\n mt=\"xxxs\"\n mb=\"15px\"\n labelOverflow={labelOverflow}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledItemLabel>\n <StyledRightContainer\n mt=\"xxxs\"\n pr=\"xxs2\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDnB;AAhDJ,mBAAmC;AACnC,uCAA2C;AAE3C,8BAA6B;AAE7B,oBAA2E;AAC3E,uBAA4C;AAE5C,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA;AAAA;AAAA,kCAGlD,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kCAI9D,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlD,MAAM,WAAW,CAAC,UAAyD;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,kBAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,cAAa;AAAA,YACb,eAAa,6CAA4B;AAAA,YAExC,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU;AAAA;AAAA,QACnE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA,eAAa,mBAAmB,6CAA4B;AAAA,YAE3D,4BAAkB,aAAa,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,6CAA4B;AAAA,YAExC,4BAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,12 +56,32 @@ const ItemSection = (props) => {
|
|
|
56
56
|
minHeight: "32px",
|
|
57
57
|
paddingTop: "8px",
|
|
58
58
|
children: [
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
60
|
+
import_styled.StyledSectionContainer,
|
|
61
|
+
{
|
|
62
|
+
cols: ["min-content", "auto", "min-content", "auto"],
|
|
63
|
+
pl: "xxs",
|
|
64
|
+
alignItems: "center",
|
|
65
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.SECTION_CONTAINER,
|
|
66
|
+
children: [
|
|
67
|
+
LeftComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftComponent, { ctx, item }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionLabel, { "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL, children: label }),
|
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
import_styled.StyledVerticalSeparator,
|
|
71
|
+
{
|
|
72
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
import_styled.StyledRightLabel,
|
|
77
|
+
{
|
|
78
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.SECTION_RIGHT_LABEL,
|
|
79
|
+
children: labelRightSection
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
),
|
|
65
85
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
86
|
import_styled.StyledRightContainer,
|
|
67
87
|
{
|
|
@@ -73,6 +93,7 @@ const ItemSection = (props) => {
|
|
|
73
93
|
onKeyDown: (e) => e.stopPropagation(),
|
|
74
94
|
pr: "xxs2",
|
|
75
95
|
alignItems: "center",
|
|
96
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
76
97
|
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
77
98
|
}
|
|
78
99
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSection/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledSectionLabel,\n StyledRightLabel,\n StyledVerticalSeparator,\n StyledRightContainer,\n StyledSectionContainer,\n} from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemSection = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <StyledSectionContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,8BAA6B;AAE7B,oBAMO;AACP,uBAA4C;AAErC,MAAM,cAAc,CAAC,UAAyD;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,eAAe;AAAA,EACxB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,QACnE,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledSectionLabel,\n StyledRightLabel,\n StyledVerticalSeparator,\n StyledRightContainer,\n StyledSectionContainer,\n} from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemSection = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <StyledSectionContainer\n cols={['min-content', 'auto', 'min-content', 'auto']}\n pl=\"xxs\"\n alignItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n <StyledSectionLabel data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL}>\n {label}\n </StyledSectionLabel>\n <StyledVerticalSeparator\n data-testid={LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n <StyledRightLabel\n data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_RIGHT_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n >\n {labelRightSection}\n </StyledRightLabel>\n </StyledSectionContainer>\n <StyledRightContainer\n ml=\"auto\"\n onFocus={(e: React.FocusEvent) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n pr=\"xxs2\"\n alignItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,8BAA6B;AAE7B,oBAMO;AACP,uBAA4C;AAErC,MAAM,cAAc,CAAC,UAAyD;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,eAAe;AAAA,EACxB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,QACnE,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,eAAe,QAAQ,eAAe,MAAM;AAAA,YACnD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,6CAA4B;AAAA,YAExC;AAAA,8BAAgB,4CAAC,iBAAc,KAAU,MAAY,IAAK,4CAAC,SAAI;AAAA,cAChE,4CAAC,oCAAmB,eAAa,mBAAmB,6CAA4B,eAC7E,iBACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,6CAA4B;AAAA;AAAA,cAC3C;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,6CAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAS,CAAC,MAAwB;AAChC,6BAAe,IAAI;AACnB,gBAAE,gBAAgB;AAAA,YACpB;AAAA,YACA,WAAW,CAAC,MAA2B,EAAE,gBAAgB;AAAA,YACzD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,6CAA4B;AAAA,YAExC,4BAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -61,7 +61,12 @@ const ItemSeparator = (props) => {
|
|
|
61
61
|
},
|
|
62
62
|
minHeight: "1px",
|
|
63
63
|
paddingTop: "0px",
|
|
64
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
StyledSeparator,
|
|
66
|
+
{
|
|
67
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR
|
|
68
|
+
}
|
|
69
|
+
)
|
|
65
70
|
}
|
|
66
71
|
);
|
|
67
72
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSeparator/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_SEPARATOR })`\n height: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n width: auto;\n margin: ${(props) => props.theme.space.xxxs} 0;\n margin-left: ${(props) => props.theme.space.xxxs};\n grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const { item } = props;\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaRole: 'separator',\n selectable: false,\n focuseable: false,\n },\n CollapsedComponent: null,\n }}\n minHeight=\"1px\"\n paddingTop=\"0px\"\n >\n <StyledSeparator />\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,uBAAuB;AACvB,8BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS, LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_SEPARATOR })`\n height: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n width: auto;\n margin: ${(props) => props.theme.space.xxxs} 0;\n margin-left: ${(props) => props.theme.space.xxxs};\n grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const { item } = props;\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaRole: 'separator',\n selectable: false,\n focuseable: false,\n },\n CollapsedComponent: null,\n }}\n minHeight=\"1px\"\n paddingTop=\"0px\"\n >\n <StyledSeparator\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,uBAAuB;AACvB,8BAA6B;AAC7B,uBAAyF;AAGzF,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEpD,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,iBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAI3C,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6CAA4B;AAAA;AAAA,MAC3C;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(ItemSkeleton_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_skeleton = require("@elliemae/ds-skeleton");
|
|
37
|
+
var import_constants = require("../../constants/constants.js");
|
|
37
38
|
var import_exported_related = require("../../exported-related/index.js");
|
|
38
39
|
var import_styled = require("../styled.js");
|
|
39
40
|
const noShadowStyle = () => () => "box-shadow: none;";
|
|
@@ -59,7 +60,17 @@ const ItemSkeleton = (props) => {
|
|
|
59
60
|
shadowStyle: noShadowStyle,
|
|
60
61
|
hasBorderBottom,
|
|
61
62
|
children: [
|
|
62
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
import_styled.StyledLeftContainer,
|
|
65
|
+
{
|
|
66
|
+
cols: ["38px"],
|
|
67
|
+
gutter: "1px",
|
|
68
|
+
pl: 0,
|
|
69
|
+
justifyItems: "center",
|
|
70
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
|
|
71
|
+
children: variant === "item" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, {})
|
|
72
|
+
}
|
|
73
|
+
),
|
|
63
74
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", mt: "2px", mb: "15px", w: "auto", mr: "xs" })
|
|
64
75
|
]
|
|
65
76
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSkeleton/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQU;
|
|
4
|
+
"sourcesContent": ["import { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLeftContainer } from '../styled.js';\n\nconst noShadowStyle = () => () => 'box-shadow: none;';\n\nconst CollapsedComponent = () => <DSSkeleton variant=\"circular\" w={24} h={24} />;\n\ninterface SkeletonPropsT {\n item: DSLeftNavigationT.ComponentProps['item'];\n hasBorderBottom?: boolean;\n}\nexport const ItemSkeleton = (props: SkeletonPropsT): JSX.Element => {\n const { item, hasBorderBottom } = props;\n\n const variant = item?.itemOpts?.skeletonVariant ?? 'item';\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: item?.itemOpts\n ? {\n ...item.itemOpts,\n selectable: false,\n focuseable: false,\n ariaRole: 'menuitem',\n ariaLabel: 'Loading',\n }\n : {},\n CollapsedComponent: variant === 'item' ? CollapsedComponent : null,\n }}\n minHeight={variant === 'item' ? '48px' : '32px'}\n shadowStyle={noShadowStyle}\n hasBorderBottom={hasBorderBottom}\n >\n <StyledLeftContainer\n cols={['38px']}\n gutter=\"1px\"\n pl={0}\n justifyItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {variant === 'item' && <CollapsedComponent />}\n </StyledLeftContainer>\n <DSSkeleton variant=\"rectangular\" mt=\"2px\" mb=\"15px\" w=\"auto\" mr=\"xs\" />\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQU;AARjC,yBAA2B;AAC3B,uBAA4C;AAC5C,8BAA6B;AAE7B,oBAAoC;AAEpC,MAAM,gBAAgB,MAAM,MAAM;AAElC,MAAM,qBAAqB,MAAM,4CAAC,iCAAW,SAAQ,YAAW,GAAG,IAAI,GAAG,IAAI;AAMvE,MAAM,eAAe,CAAC,UAAuC;AAClE,QAAM,EAAE,MAAM,gBAAgB,IAAI;AAElC,QAAM,UAAU,MAAM,UAAU,mBAAmB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,MAAM,WACZ;AAAA,UACE,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,QACb,IACA,CAAC;AAAA,QACL,oBAAoB,YAAY,SAAS,qBAAqB;AAAA,MAChE;AAAA,MACA,WAAW,YAAY,SAAS,SAAS;AAAA,MACzC,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,cAAa;AAAA,YACb,eAAa,6CAA4B;AAAA,YAExC,sBAAY,UAAU,4CAAC,sBAAmB;AAAA;AAAA,QAC7C;AAAA,QACA,4CAAC,iCAAW,SAAQ,eAAc,IAAG,OAAM,IAAG,QAAO,GAAE,QAAO,IAAG,MAAK;AAAA;AAAA;AAAA,EACxE;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,13 +33,13 @@ __export(ItemSubmenu_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ItemSubmenu_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
37
36
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
37
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
var import_constants = require("../../constants/constants.js");
|
|
40
|
+
var import_constants2 = require("../../exported-related/constants.js");
|
|
39
41
|
var import_exported_related = require("../../exported-related/index.js");
|
|
40
|
-
var import_constants = require("../../exported-related/constants.js");
|
|
41
42
|
var import_styled = require("../styled.js");
|
|
42
|
-
var import_constants2 = require("../../constants/constants.js");
|
|
43
43
|
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
44
44
|
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
|
|
45
45
|
|
|
@@ -101,6 +101,7 @@ const ItemSubmenu = (props) => {
|
|
|
101
101
|
gutter: "1px",
|
|
102
102
|
pl: opened ? "xxs" : 0,
|
|
103
103
|
justifyItems: "center",
|
|
104
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
|
|
104
105
|
children: [
|
|
105
106
|
opened && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
107
|
import_styled.StyledChevronLeft,
|
|
@@ -112,9 +113,10 @@ const ItemSubmenu = (props) => {
|
|
|
112
113
|
tabIndex: 0,
|
|
113
114
|
onFocus: (e) => {
|
|
114
115
|
e.stopPropagation();
|
|
115
|
-
setFocusedItem(
|
|
116
|
+
setFocusedItem(import_constants2.CHEVRON_BACK_DS_ID);
|
|
116
117
|
},
|
|
117
118
|
"aria-label": `Close ${ariaLabel}`,
|
|
119
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK,
|
|
118
120
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
|
|
119
121
|
}
|
|
120
122
|
),
|
|
@@ -129,7 +131,7 @@ const ItemSubmenu = (props) => {
|
|
|
129
131
|
mt: "xxxs",
|
|
130
132
|
mb: "15px",
|
|
131
133
|
labelOverflow,
|
|
132
|
-
"data-testid": labelDataTestId ||
|
|
134
|
+
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
|
|
133
135
|
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
134
136
|
}
|
|
135
137
|
),
|
|
@@ -144,6 +146,7 @@ const ItemSubmenu = (props) => {
|
|
|
144
146
|
},
|
|
145
147
|
onKeyDown: (e) => e.stopPropagation(),
|
|
146
148
|
onClick: (e) => openedItem === dsId && e.stopPropagation(),
|
|
149
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
147
150
|
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
148
151
|
}
|
|
149
152
|
),
|
|
@@ -160,6 +163,7 @@ const ItemSubmenu = (props) => {
|
|
|
160
163
|
},
|
|
161
164
|
onKeyDown: (e) => e.stopPropagation(),
|
|
162
165
|
onClick: (e) => openedItem && e.stopPropagation(),
|
|
166
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER,
|
|
163
167
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomComponent, { ctx, item })
|
|
164
168
|
}
|
|
165
169
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSubmenu/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmFjB;AAhFN,mBAAmC;AACnC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport type { Theme } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback } from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledBottomContainer,\n StyledChevronLeft,\n StyledItemLabel,\n StyledLeftContainer,\n StyledRightContainer,\n} from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemSubmenu = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n selectedItem,\n selectedParent,\n setFocusedItem,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const opened = openedItem === dsId;\n\n const isSelected = selectedItem === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_\n ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [dsId, isSelected, selectedParent],\n );\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaLabel,\n ariaExpanded: opened,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n shadowStyle={shadowStyle}\n hasBorderBottom={opened}\n borderBottomMr=\"12px\"\n >\n <StyledLeftContainer\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {opened && (\n <StyledChevronLeft\n buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n }}\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK} // https://jira.elliemae.io/browse/PUI-15589\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n labelOverflow={labelOverflow}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledItemLabel>\n <StyledRightContainer\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n onClick={(e: React.MouseEvent) => openedItem === dsId && e.stopPropagation()}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\n style={{ gridColumn: 'span 3' }}\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n onClick={(e: React.MouseEvent) => openedItem && e.stopPropagation()}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <BottomComponent ctx={ctx} item={item} />\n </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -69,7 +69,7 @@ const ItemTextLabel = (props) => {
|
|
|
69
69
|
labelColor,
|
|
70
70
|
mr: "xxs2",
|
|
71
71
|
pb: "xxxs",
|
|
72
|
-
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.
|
|
72
|
+
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
|
|
73
73
|
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
74
74
|
}
|
|
75
75
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemTextLabel/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AAnBJ,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAA4B;AAC5B,uBAA4C;AAErC,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB,6CAA4B;AAAA,YAE3D,4BAAkB,aAAa,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,15 +33,15 @@ __export(ItemUncontrolledDrilldown_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ItemUncontrolledDrilldown_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
36
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
37
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
var import_constants = require("../../constants/constants.js");
|
|
39
40
|
var import_exported_related = require("../../exported-related/index.js");
|
|
40
|
-
var import_styled = require("../styled.js");
|
|
41
41
|
var import_ItemSeparator = require("../ItemSeparator/index.js");
|
|
42
|
-
var import_ItemWithDate = require("../ItemWithDate/index.js");
|
|
43
42
|
var import_ItemTextLabel = require("../ItemTextLabel/index.js");
|
|
44
|
-
var
|
|
43
|
+
var import_ItemWithDate = require("../ItemWithDate/index.js");
|
|
44
|
+
var import_styled = require("../styled.js");
|
|
45
45
|
const outOfTheBoxSubitemsComponents = {
|
|
46
46
|
[import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: import_ItemSeparator.ItemSeparator,
|
|
47
47
|
[import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: import_ItemWithDate.ItemWithDate,
|
|
@@ -125,7 +125,15 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
125
125
|
paddingTop: "8px",
|
|
126
126
|
onClick: handleOnClick,
|
|
127
127
|
children: [
|
|
128
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
import_styled.StyledArrowContainer,
|
|
130
|
+
{
|
|
131
|
+
pl: "xxs",
|
|
132
|
+
mt: "-2px",
|
|
133
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER,
|
|
134
|
+
children: arrowIcon
|
|
135
|
+
}
|
|
136
|
+
),
|
|
129
137
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
130
138
|
import_styled.StyledLabel,
|
|
131
139
|
{
|
|
@@ -133,14 +141,31 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
133
141
|
labelOverflow,
|
|
134
142
|
labelBold,
|
|
135
143
|
labelColor,
|
|
136
|
-
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.
|
|
144
|
+
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
|
|
137
145
|
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
138
146
|
}
|
|
139
147
|
),
|
|
140
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
149
|
+
import_styled.StyledRightContainer,
|
|
150
|
+
{
|
|
151
|
+
pr: "xxs2",
|
|
152
|
+
cols: ["auto", "auto"],
|
|
153
|
+
alignItems: "center",
|
|
154
|
+
gutter: "xxs",
|
|
155
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
156
|
+
children: [
|
|
157
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
import_styled.StyledDate,
|
|
159
|
+
{
|
|
160
|
+
ml: "xxs",
|
|
161
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE,
|
|
162
|
+
children: labelRightSection
|
|
163
|
+
}
|
|
164
|
+
),
|
|
165
|
+
RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
)
|
|
144
169
|
]
|
|
145
170
|
}
|
|
146
171
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCZ;AAhCX,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ITEM_TYPES, ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { StyledArrowContainer, StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <StyledArrowContainer\n pl=\"xxs\"\n mt=\"-2px\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {arrowIcon}\n </StyledArrowContainer>\n <StyledLabel\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <StyledRightContainer\n pr=\"xxs2\"\n cols={['auto', 'auto']}\n alignItems=\"center\"\n gutter=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <StyledDate\n ml=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n >\n {labelRightSection}\n </StyledDate>\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,9 +34,9 @@ module.exports = __toCommonJS(ItemWithDate_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
37
|
+
var import_constants = require("../../constants/constants.js");
|
|
37
38
|
var import_exported_related = require("../../exported-related/index.js");
|
|
38
39
|
var import_styled = require("../styled.js");
|
|
39
|
-
var import_constants = require("../../constants/constants.js");
|
|
40
40
|
const ItemWithDate = (props) => {
|
|
41
41
|
const {
|
|
42
42
|
item,
|
|
@@ -77,14 +77,31 @@ const ItemWithDate = (props) => {
|
|
|
77
77
|
labelOverflow,
|
|
78
78
|
labelBold,
|
|
79
79
|
labelColor,
|
|
80
|
-
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.
|
|
80
|
+
"data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
|
|
81
81
|
children: labelOverflow === "truncate" && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
82
82
|
}
|
|
83
83
|
),
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
85
|
+
import_styled.StyledRightContainer,
|
|
86
|
+
{
|
|
87
|
+
pr: "xxs2",
|
|
88
|
+
cols: ["auto", "auto"],
|
|
89
|
+
alignItems: "center",
|
|
90
|
+
gutter: "xxs",
|
|
91
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
import_styled.StyledDate,
|
|
95
|
+
{
|
|
96
|
+
ml: "xxs",
|
|
97
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE,
|
|
98
|
+
children: labelRightSection
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
)
|
|
88
105
|
]
|
|
89
106
|
}
|
|
90
107
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' && label ? (\n <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n ) : (\n label\n )}\n </StyledLabel>\n <StyledRightContainer\n pr=\"xxs2\"\n cols={['auto', 'auto']}\n alignItems=\"center\"\n gutter=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <StyledDate\n ml=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n >\n {labelRightSection}\n </StyledDate>\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCW;AApClC,uCAA2C;AAC3C,uBAA4C;AAC5C,8BAA6B;AAE7B,oBAA8D;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,mBAAmB,6CAA4B;AAAA,YAE3D,4BAAkB,cAAc,QAC/B,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,6CAA4B;AAAA,YAEzC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,6CAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|